diff --git a/src/assets/icons/ar.png b/src/assets/icons/ar.png new file mode 100644 index 0000000..42cea88 Binary files /dev/null and b/src/assets/icons/ar.png differ diff --git a/src/assets/icons/hamburger.png b/src/assets/icons/hamburger.png new file mode 100644 index 0000000..4edcff8 Binary files /dev/null and b/src/assets/icons/hamburger.png differ diff --git a/src/assets/icons/logoMobile.png b/src/assets/icons/logoMobile.png new file mode 100644 index 0000000..66203b1 Binary files /dev/null and b/src/assets/icons/logoMobile.png differ diff --git a/src/assets/icons/navbarSearch.png b/src/assets/icons/navbarSearch.png new file mode 100644 index 0000000..4a13be4 Binary files /dev/null and b/src/assets/icons/navbarSearch.png differ diff --git a/src/assets/icons/qr.png b/src/assets/icons/qr.png new file mode 100644 index 0000000..f778654 Binary files /dev/null and b/src/assets/icons/qr.png differ diff --git a/src/assets/images/pic1.png b/src/assets/images/pic1.png new file mode 100644 index 0000000..a89f932 Binary files /dev/null and b/src/assets/images/pic1.png differ diff --git a/src/views/Home/Footer/index.js b/src/views/Home/Footer/index.js index 3447429..70370e9 100644 --- a/src/views/Home/Footer/index.js +++ b/src/views/Home/Footer/index.js @@ -9,62 +9,128 @@ export default class Footer extends Component { render() { const { fastAccess } = this.props; return ( - + : null + } + + ); } } diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss index cd6f4f6..cf8bdbc 100644 --- a/src/views/Home/Footer/index.scss +++ b/src/views/Home/Footer/index.scss @@ -76,3 +76,80 @@ } } } + + +.mobile-footer { + width: 100%; + background-color: rgb(80, 80, 80); + &-container { + width: 100%; + padding : 20px 20px; + margin: 0px auto; + &__content { + padding-bottom: 40px; + .first { + color: white; + img { + width: 15px; + height: 17px; + } + h1 { + font-family: numeralBold; + color: #c4e14c; + font-size: calc(100vw / 20); + } + p { + margin-bottom: 0px; + font-family: numeralLight; + font-size: calc(100vw / 40); + max-width: 90%; + } + span { + font-family: numeralLight; + font-size: calc(100vw / 40); + color: #c4e14c; + margin-top: 2px; + } + } + .second { + color: white; + h1 { + font-family: numeralBold; + color: #c4e14c; + font-size: calc(100vw / 20); + } + ul { + list-style: none; + padding: 0px; + li { + a { + font-family: numeralLight; + font-size: calc(100vw / 40); + margin-top: 5px; + color: white; + text-decoration: none; + } + } + } + } + &--box { + margin-left: 15px; + padding-top: 40px; + justify-content: flex-start; + text-align: right; + } + } + } + &__privacy { + width: 100%; + justify-content: center; + color: white; + background-color: rgba(34, 34, 34, 0.316); + padding: 15px 0px; + p { + font-family: numeralMedium; + font-size: calc(100vw / 50); + margin-bottom: 0px; + } + } +} diff --git a/src/views/Home/HomeScroll/MyProduct/index.js b/src/views/Home/HomeScroll/MyProduct/index.js new file mode 100644 index 0000000..3725538 --- /dev/null +++ b/src/views/Home/HomeScroll/MyProduct/index.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import {Link} from 'react-router-dom'; + +import './index.scss'; +export default class MyProduct extends Component { + render() { + const { data, number } = this.props; + return( +
+ + {data.title} +

{data.title}

+

{data.subTitle}

+ +
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Home/HomeScroll/MyProduct/index.scss b/src/views/Home/HomeScroll/MyProduct/index.scss new file mode 100644 index 0000000..8d5248b --- /dev/null +++ b/src/views/Home/HomeScroll/MyProduct/index.scss @@ -0,0 +1,64 @@ +.scroll-my-product{ + padding: 10px; + background-color: #ddd; + a{ + width : 100%; + text-decoration: none; + &:hover{ + } + img{ + width: 100%; + height: 150px; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + } + h1{ + font-family: numeralLight; + margin-top: 5px; + font-size: calc(100vw / 34); + color: #7dc241; + letter-spacing: -1px; + } + h2{ + font-family: numeralLight; + margin-top: 10px; + font-size: calc(100vw / 45); + color: #6f7074; + } + } + &__notAvailabe{ + font-family: numeralBold; + font-size: calc(100vw / 45); + width : 100%; + text-align: center; + color: #6f7074; + margin-top: 15px; + } + &__price{ + font-size: calc(100vw / 45); + width : 100%; + margin-top: 15px; + text-align: center; + &--old{ + font-family: numeralBold; + color: #6f7074; + position: relative; + margin-left: 0px; + align-items:center; + font-size: calc(100vw / 45); + span{ + position: absolute; + left: 0px; + width : 100%; + height: 2px; + background-color: rgba(121, 121, 121, 0.534); + transform: rotate(-14deg); + } + } + &--price{ + color: #02733c; + font-family: numeralBold; + font-size: calc(100vw / 45); + } + } +} \ No newline at end of file diff --git a/src/views/Home/HomeScroll/Product/index.js b/src/views/Home/HomeScroll/Product/index.js new file mode 100644 index 0000000..9ac0147 --- /dev/null +++ b/src/views/Home/HomeScroll/Product/index.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react'; +import {Link} from 'react-router-dom'; + +import './index.scss'; +export default class Product extends Component { + render() { + const { data, number } = this.props; + return( +
+ + {data.title} +

{data.title}

+

{data.subTitle}

+ { + data.price ? +
+ { + data.oldPrice ? +
+
+ {data.oldPrice} تومان + +
+ +
: null + } +
{data.price} تومان
+
: +
ناموجود
+ } + +
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Home/HomeScroll/Product/index.scss b/src/views/Home/HomeScroll/Product/index.scss new file mode 100644 index 0000000..2869f43 --- /dev/null +++ b/src/views/Home/HomeScroll/Product/index.scss @@ -0,0 +1,63 @@ +.scroll-product{ + padding: 10px; + a{ + width : 100%; + text-decoration: none; + &:hover{ + } + img{ + width: 100%; + height: 150px; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + } + h1{ + font-family: numeralLight; + margin-top: 5px; + font-size: calc(100vw / 34); + color: #7dc241; + letter-spacing: -1px; + } + h2{ + font-family: numeralLight; + margin-top: 10px; + font-size: calc(100vw / 45); + color: #6f7074; + } + } + &__notAvailabe{ + font-family: numeralBold; + font-size: calc(100vw / 45); + width : 100%; + text-align: center; + color: #6f7074; + margin-top: 15px; + } + &__price{ + font-size: calc(100vw / 45); + width : 100%; + margin-top: 15px; + text-align: center; + &--old{ + font-family: numeralBold; + color: #6f7074; + position: relative; + margin-left: 0px; + align-items:center; + font-size: calc(100vw / 45); + span{ + position: absolute; + left: 0px; + width : 100%; + height: 2px; + background-color: rgba(121, 121, 121, 0.534); + transform: rotate(-14deg); + } + } + &--price{ + color: #02733c; + font-family: numeralBold; + font-size: calc(100vw / 45); + } + } +} \ No newline at end of file diff --git a/src/views/Home/HomeScroll/Subject/index.js b/src/views/Home/HomeScroll/Subject/index.js new file mode 100644 index 0000000..4ac6946 --- /dev/null +++ b/src/views/Home/HomeScroll/Subject/index.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; +import {Link} from 'react-router-dom'; + +import './index.scss'; +export default class Subject extends Component { + render() { + const { data, number } = this.props; + return( + +

{data.name}

+ + + ); + } +} \ No newline at end of file diff --git a/src/views/Home/HomeScroll/Subject/index.scss b/src/views/Home/HomeScroll/Subject/index.scss new file mode 100644 index 0000000..9da05d2 --- /dev/null +++ b/src/views/Home/HomeScroll/Subject/index.scss @@ -0,0 +1,12 @@ +.scroll-subject{ + padding: 12px 0px; + font-family: numeralLight; + color: white; + text-decoration: none; + border-radius: 6px; + + h1{ + font-size: calc(100vw / 35); + margin: 0px; + } +} \ No newline at end of file diff --git a/src/views/Home/HomeScroll/index.js b/src/views/Home/HomeScroll/index.js index 6fdfc5b..fbef5b7 100644 --- a/src/views/Home/HomeScroll/index.js +++ b/src/views/Home/HomeScroll/index.js @@ -1,13 +1,15 @@ import React, { Component } from "react"; -import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; -import { Link } from "react-router-dom"; +import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import Product from './Product/index'; +import Subject from './Subject/index'; +import MyProduct from './MyProduct/index'; import dropdown from '../../../assets/icons/dropdown.png'; import "./index.scss"; export default class HomeScroll extends Component { render() { - const { data, height, title } = this.props; + const { data, height, title,designType, moreText, number } = this.props; return (
- ادامه لیست + {moreText} فلش
{data.map((item, i) => ( - + ))}
@@ -36,18 +38,19 @@ export default class HomeScroll extends Component { const Item = (props) => { return ( - - عکس - + <> + { + props.designType === 'product' ? + : null + } + { + props.designType === 'subjects' ? + : null + } + { + props.designType === 'myProduct' ? + : null + } + ); }; diff --git a/src/views/Home/HomeScroll/index.scss b/src/views/Home/HomeScroll/index.scss index 5e50d3b..0937597 100644 --- a/src/views/Home/HomeScroll/index.scss +++ b/src/views/Home/HomeScroll/index.scss @@ -10,7 +10,7 @@ &--right{ position: relative; h1{ - font-size: calc(100vw / 70); + font-size: calc(100vw / 30); font-family: numeralBold; letter-spacing: -1px; } @@ -27,12 +27,12 @@ &--more{ span{ - font-size: calc(100vw / 80); - color: #02733c; + font-size: calc(100vw / 35); + color: #7dc241; font-family: numeralMedium; } img{ - width: 20px; + width: 15px; height: 12px; transform: rotate(90deg); } diff --git a/src/views/Home/HomeSlider/Blog/index.js b/src/views/Home/HomeSlider/Blog/index.js index 2d6eb18..ea38c3b 100644 --- a/src/views/Home/HomeSlider/Blog/index.js +++ b/src/views/Home/HomeSlider/Blog/index.js @@ -6,27 +6,57 @@ export default class Simple extends Component { render() { const { height, data } = this.props; return( -
-
- {data.title} -

{data.title}

-

{data.subTitle}

-
-
- {/* */} -
- مطالعه کامل در {data.duration} - تاریخ انتشار {data.data} + <> + { + window.innerWidth > 1000 ? +
+
+ {data.title} +

{data.title}

+

{data.subTitle}

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

{data.title}

+

{data.subTitle}

+
+
+ {/* */} +
+ مطالعه کامل در {data.duration} + تاریخ انتشار {data.data} +
+
+ {data.buttonText} +
+ {data.category.name} +
+
: null + } + + ); } diff --git a/src/views/Home/HomeSlider/Blog/index.scss b/src/views/Home/HomeSlider/Blog/index.scss index 251dd91..ee209fc 100644 --- a/src/views/Home/HomeSlider/Blog/index.scss +++ b/src/views/Home/HomeSlider/Blog/index.scss @@ -58,3 +58,65 @@ } } } + + +.mobile-slider-blog { + margin: 10px; + padding: 5px 8px; + box-shadow: 0px 0px 5px rgb(200, 200, 200); + border-radius: 15px; + width: 100%; + text-decoration: none; + position: relative; + img { + width: 100%; + height: 150px; + border-radius: 10px; + } + h1 { + font-family: numeralBold; + margin-top: 15px; + font-size: calc(100vw / 35); + color: #6f7074; + } + h2 { + font-family: numeralLight; + margin-top: 5px; + font-size: calc(100vw / 50); + color: #a5a5a5; + } + &__category{ + font-family: numeralMedium; + position: absolute; + top: 10px; + left: 13px; + color: white; + padding: 5px 7px; + border-radius: 5px; + font-size: calc(100vw / 60); + } + + &__footer { + width: 100%; + align-items:center; + justify-content:space-between; + a { + font-family: numeralMedium; + padding: 6px 12px; + background-color: #e6e6e6; + color: #02733c; + text-decoration: none; + border-radius: 5px; + font-size: calc(100vw / 50); + &:hover{ + color: #02733c; + } + } + span{ + font-family: numeralLight; + font-size: calc(100vw / 50); + color: #a5a5a5; + letter-spacing: -1px; + } + } +} diff --git a/src/views/Home/HomeSlider/Header/index.js b/src/views/Home/HomeSlider/Header/index.js index b1d8c78..36eacb2 100644 --- a/src/views/Home/HomeSlider/Header/index.js +++ b/src/views/Home/HomeSlider/Header/index.js @@ -6,26 +6,54 @@ export default class Header extends Component { render() { const { height, data } = this.props; return ( -
- {/* {data.title} */} -
-

{data.title}

-

{data.subTitle}

- {data.buttonText} -
-
+ <> + { + window.innerWidth > 1000 ? +
+
+ {data.title} +
+
+

{data.title}

+

{data.subTitle}

+ {data.buttonText} +
+
: null + } + { + window.innerWidth < 1000 ? +
+
+ {data.title} +
+
+

{data.title}

+

{data.subTitle}

+ {data.buttonText} +
+
: null + } + + + ); } } diff --git a/src/views/Home/HomeSlider/Header/index.scss b/src/views/Home/HomeSlider/Header/index.scss index 232a648..50cd155 100644 --- a/src/views/Home/HomeSlider/Header/index.scss +++ b/src/views/Home/HomeSlider/Header/index.scss @@ -1,20 +1,22 @@ .slider-header{ width : 100%; justify-content: flex-end; + &__right{ + width: 60%; + height: 100%; + & img{ + + } + } &__left{ width: 40%; height: 100%; justify-content : center; align-items: flex-end; padding-left: 70px; - & img{ - width : 100%; - z-index: -1; - height : 100%; - object-fit: cover; - } + h1{ - font-size: calc(100vw / 50); + font-size: calc(100vw / 55); color: white; font-family: numeralBold; letter-spacing: -1px; @@ -34,6 +36,60 @@ border : 1px solid white; border-radius: 5px; font-family: numeralMedium; + &:hover{ + color: white; + } + } + } +} + + +.mobile-slider-header{ + width : 100%; + justify-content: flex-end; + &__right{ + width: 50%; + height: 100%; + justify-content : center; + align-items: center; + & img{ + position: relative; + width: 200%; + height: 110%; + right: 40px; + bottom: 10px; + } + } + &__left{ + width: 50%; + height: 100%; + justify-content : center; + align-items: flex-end; + padding-left: 30px; + + h1{ + font-size: calc(100vw / 37); + color: white; + font-family: numeralBold; + } + h2{ + margin-top: 5px; + font-size: calc(100vw / 48); + color: white; + font-family: numeralBold; + } + a{ + text-decoration: none; + color: white; + margin-top: 10px; + font-size: calc(100vw / 55); + padding: 6px 10px; + border : 1px solid white; + border-radius: 5px; + font-family: numeralMedium; + &:hover{ + color: white; + } } } } \ No newline at end of file diff --git a/src/views/Home/HomeSlider/index.js b/src/views/Home/HomeSlider/index.js index 3cbd533..f1330e7 100644 --- a/src/views/Home/HomeSlider/index.js +++ b/src/views/Home/HomeSlider/index.js @@ -50,25 +50,54 @@ export default class HomeSlider extends Component { } } return ( -
+ { + window.innerWidth > 1000 ? +
+ {header} + + + {data.map((item, i) => ( + + ))} + +
: null } - > - {header} + { + window.innerWidth < 1000 ? +
+ {header} - - {data.map((item, i) => ( - - ))} - -
+ + {data.map((item, i) => ( + + ))} + +
: null + } + + + ); } } diff --git a/src/views/Home/HomeSlider/index.scss b/src/views/Home/HomeSlider/index.scss index 1a4bfad..cd05031 100644 --- a/src/views/Home/HomeSlider/index.scss +++ b/src/views/Home/HomeSlider/index.scss @@ -1,10 +1,37 @@ +.mobile-home-slider{ + width: 100%; + padding: 2px 0px 0px; + margin: 0px 0px 10px; + position: relative; + .rec-arrow-left{ + top : calc(50% - 22px) !important; + right: -12px !important; + } + + .rec-arrow-right{ + top : calc(50% - 22px) !important; + left: -12px !important; + } +} + .home-slider { width: 100%; padding: 2px 0px 0px; margin: 10px 0px 10px; position: relative; + .rec-arrow-left{ + top : calc(50% - 22px) !important; + right: 5px !important; + } + + .rec-arrow-right{ + top : calc(50% - 22px) !important; + left: 5px !important; + } } + + .rec-dot_active { background-color: green !important; color: white !important; @@ -56,12 +83,3 @@ border-radius: 10px; } -.rec-arrow-left{ - top : calc(50% - 22px) !important; - right: 10px !important; -} - -.rec-arrow-right{ - top : calc(50% - 22px) !important; - left: 10px !important; -} \ No newline at end of file diff --git a/src/views/Home/Membership/index.js b/src/views/Home/Membership/index.js index 48f60fe..1a0e1bf 100644 --- a/src/views/Home/Membership/index.js +++ b/src/views/Home/Membership/index.js @@ -5,17 +5,40 @@ import "./index.scss"; export default class Membership extends Component { render() { return ( -
-
-

دانوینی شو

-

مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید

-
-
- - - -
-
+ <> + { + window.innerWidth > 1000 ? +
+
+

دانوینی شو

+

مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید

+
+
+ + + +
+
: null + } + { + window.innerWidth < 1000 ? +
+
+

دانوینی شو

+

مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید

+
+
+
+ +
+
+ +
+ +
+
: null + } + ); } } diff --git a/src/views/Home/Membership/index.scss b/src/views/Home/Membership/index.scss index aabb57e..d1c779f 100644 --- a/src/views/Home/Membership/index.scss +++ b/src/views/Home/Membership/index.scss @@ -68,3 +68,75 @@ margin-right: 20px; } } + + +.mobile-membership { + width: 100%; + padding: 15px 20px; + box-shadow: 0px 0px 5px rgb(200, 200, 200); + border-radius: 7px; + justify-content: space-between; + align-items:center; + flex: 1; + margin-top: 20px; + margin-bottom: 20px; + h1{ + font-family: numeralBold; + font-size: calc(100vw / 20); + margin-bottom: 0px; + color: #1bbc6e; + strong{ + color: white; + background-color: #1bbc6e; + padding:0px 2px; + } + } + p{ + margin-top: 10px; + font-family: numeralMedium; + margin-bottom: 0px; + font-size: calc(100vw / 50); + color: #6f7074; + } + + .MuiOutlinedInput-notchedOutline{ + top: 0px !important; + } + + .MuiOutlinedInput-input{ + padding : 15px 14px !important; + } + .MuiInputLabel-outlined{ + font-family: numeralLight !important; + display : inline; + position: absolute; + right: 4px; + top: 12px; + transform: translate(0px, 0px) scale(1) !important; + } + .MuiInputLabel-shrink{ + display : inline; + position: absolute; + right: -23px; + top: -8px; + transform: translate(0px, 0px) scale(0.75) !important; + } + + label{ + background-color: white; + max-width: 120px; + text-align: center; + font-size: 14px !important; + } + + &__submit { + font-family: numeralMedium; + border: 0px; + font-size: calc(100vw / 100); + background-color: #1bbc6e; + color: white; + border-radius: 5px; + padding : 7px 50px; + margin-right: 20px; + } +} diff --git a/src/views/Home/Navbar/Mobile/index.js b/src/views/Home/Navbar/Mobile/index.js index 31f2985..9fe86ae 100644 --- a/src/views/Home/Navbar/Mobile/index.js +++ b/src/views/Home/Navbar/Mobile/index.js @@ -1,21 +1,26 @@ import React, { Component } from "react"; -import SearchIcon from "@material-ui/icons/Search"; -import MenuIcon from "@material-ui/icons/Menu"; + +import logo from '../../../../assets/icons/logoMobile.png'; +import hamburger from '../../../../assets/icons/hamburger.png'; +import ar from '../../../../assets/icons/ar.png'; +import qr from '../../../../assets/icons/qr.png'; +import search from '../../../../assets/icons/navbarSearch.png'; import "./index.scss"; export default class MobileNavbar extends Component { render() { return ( ); diff --git a/src/views/Home/Navbar/Mobile/index.scss b/src/views/Home/Navbar/Mobile/index.scss index eebd8aa..23968af 100644 --- a/src/views/Home/Navbar/Mobile/index.scss +++ b/src/views/Home/Navbar/Mobile/index.scss @@ -1,9 +1,26 @@ .mobile-navbar{ width: 100%; - height: 70px; position: fixed; top : 0px; left : 0px; justify-content: space-between; align-items: center; + background-color: white; + z-index: 200; + padding: 15px 10px; + &__menu{ + img{ + width : calc(100vw / 12); + } + } + &__logo{ + img{ + width: calc(100vw / 4); + } + } + &__left{ + img{ + width : calc(100vw / 15); + } + } } \ No newline at end of file diff --git a/src/views/Home/SingleBlog/index.scss b/src/views/Home/SingleBlog/index.scss index 19348e6..2c040b0 100644 --- a/src/views/Home/SingleBlog/index.scss +++ b/src/views/Home/SingleBlog/index.scss @@ -1,5 +1,6 @@ .single-blog{ width: 100%; + margin: 75px 0px; &__right{ width: 50%; height: 100%; diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 6b1b5b1..577d28a 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -10,6 +10,7 @@ import HomeSearch from "./HomeSearch/index"; import Membership from "./Membership/index"; import SingleBlog from "./SingleBlog/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'; @@ -34,15 +35,15 @@ export default class Home extends Component { { type: "slider", title: "", - height: 380, + height: window.innerWidth > 1000 ? 370 : 233, design: "header", number: 1, data: [ { id: 0, - image: pic, + image: pic1, width: "100%", - backgroundColor: "rgba(18, 159, 253,0.3)", + backgroundColor: "rgba(18, 159, 253,0.6)", title: "منفجر کردن مغز خود را به ما بسپارید", subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", link: '', @@ -50,9 +51,9 @@ export default class Home extends Component { }, { id: 1, - image: pic, + image: pic1, width: "100%", - backgroundColor: "rgba(18, 159, 253,0.3)", + backgroundColor: "rgba(18, 159, 253,0.6)", title: "منفجر کردن مغز خود را به ما بسپارید", subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", link: '', @@ -60,9 +61,9 @@ export default class Home extends Component { }, { id: 2, - image: pic, + image: pic1, width: "100%", - backgroundColor: "rgba(18, 159, 253,0.3)", + backgroundColor: "rgba(18, 159, 253,0.6)", title: "منفجر کردن مغز خود را به ما بسپارید", subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", link: '', @@ -111,11 +112,95 @@ export default class Home extends Component { data: ["همه", "پرفروش"], }, { - type: "slider", - title: "پرفروش‌ترین کتاب‌های دانوین", - height: 470, - design: "simple", + type: window.innerWidth > 1000 ? "slider" : "scroll", + title: "کتاب‌های من", + moreText: 'لیست کتاب‌ها', + height: window.innerWidth > 1000 ? 470 : 270, + design: window.innerWidth > 1000 ? "simple" : "myProduct", + number: window.innerWidth > 1000 ? 4 : 2.8, + data: [ + { + id: 0, + image: book1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + }, + { + id: 1, + image: book2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + }, + { + id: 2, + image: book3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + }, + { + id: 3, + image: book4, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + }, + { + id: 4, + image: book5, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + }, + { + id: 5, + image: book1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + }, + { + id: 6, + image: book2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + }, + { + id: 7, + image: book3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + }, + { + id: 8, + image: book4, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + }, + { + id: 9, + image: book5, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + }, + ], + }, + { + type: 'scroll', + title : 'موضوعات', + moreText: 'تمام موضوعات', + design: 'subjects', number: 4, + data: [ + {id: 0, name : 'علوم طبیعی', backgroundColor: 'yellow'}, + {id: 1, name : 'شیمی الی', backgroundColor: 'red'}, + {id: 2, name : 'زمین شناسی', backgroundColor: 'blue'}, + {id: 3, name : 'ریاضیات', backgroundColor: 'purple'}, + ] + }, + { + type: window.innerWidth > 1000 ? "slider" : "scroll", + title: "پرفروش‌ترین کتاب‌های دانوین", + moreText: 'لیست کتاب‌ها', + height: window.innerWidth > 1000 ? 470 : 320, + design: window.innerWidth > 1000 ? "simple" : "product", + number: window.innerWidth > 1000 ? 4 : 2.8, data: [ { id: 0, @@ -207,11 +292,12 @@ export default class Home extends Component { ], }, { - type: "slider", + type: window.innerWidth > 1000 ? "slider" : "scroll", title: "جدیدترین کتاب‌های دانوین", - height: 470, - design: "tab", - number: 4, + height: window.innerWidth > 1000 ? 470 : 320, + design: window.innerWidth > 1000 ? "tab" : 'product', + number: window.innerWidth > 1000 ? 4 : 3.5, + moreText: 'لیست کتاب‌ها', data: [ { id: 0, @@ -321,7 +407,7 @@ export default class Home extends Component { title: "بلاگ", height: '', design: "blog", - number: 3, + number: window.innerWidth > 1000 ? 3 : 2, data: [ { id: 0, @@ -378,13 +464,31 @@ export default class Home extends Component { const { homeData } = this.state; return ( <> -
- - {homeData.map((item, i) => ( - - ))} -
-