From 6bfcf9e65b9ee2436178b4bc0f85438fba98ed97 Mon Sep 17 00:00:00 2001 From: ravino Date: Tue, 13 Jul 2021 16:56:43 +0430 Subject: [PATCH] reza added new home to mobile --- src/assets/icons/ppt.svg | 2 +- src/assets/icons/qr-code.svg | 1 - src/assets/icons/qr.png | Bin 1187 -> 0 bytes src/assets/icons/qr.svg | 1 + src/views/Home/HomeStatic/Flex/index.js | 36 + src/views/Home/HomeStatic/Identifier/index.js | 19 + src/views/Home/HomeStatic/Simple/index.js | 29 + src/views/Home/HomeStatic/index.js | 93 +- src/views/Home/HomeStatic/index.scss | 37 +- .../Mobile/NavbarDrawer/NavbarDrawer.js | 2 +- src/views/Home/index.js | 1031 ++++++++++------- 11 files changed, 739 insertions(+), 512 deletions(-) delete mode 100644 src/assets/icons/qr-code.svg delete mode 100644 src/assets/icons/qr.png create mode 100644 src/assets/icons/qr.svg create mode 100644 src/views/Home/HomeStatic/Flex/index.js create mode 100644 src/views/Home/HomeStatic/Identifier/index.js create mode 100644 src/views/Home/HomeStatic/Simple/index.js diff --git a/src/assets/icons/ppt.svg b/src/assets/icons/ppt.svg index 2ebb461..f9de895 100644 --- a/src/assets/icons/ppt.svg +++ b/src/assets/icons/ppt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/qr-code.svg b/src/assets/icons/qr-code.svg deleted file mode 100644 index b12c6c4..0000000 --- a/src/assets/icons/qr-code.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/qr.png b/src/assets/icons/qr.png deleted file mode 100644 index f778654f4266734a5b8c6aac9d3af9a75352f367..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1187 zcmV;U1YG-xP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn z4jTXf1Sm;FK~z{r?U+qW6HyR=r=$s$mc)Ps4+1SjJ&3dwZz>TGjU<4|K?)H}M&YN9LegCB$2*Xv=EhsiuGc7j0tbT&$llPbwn!C2AaQv_Z;+THm2xja>{yQ@K zD;frhXgu&4)3Pzh%a^U-^)50kJWl6h8XrD<1Y28M(Ad}rsi`S@@*zbQnAhut>FLi* ziww7W1~xV}U~_Ym^u73yA`6UDP>>IWg@sJ}gU926wzgNa?QlGxvA(_zwzsz-IXQ`R zP9#2*P@H2aDJgLJbhb<~Gc(x{AY^5lBrop*a4-ENqi{0JEt8F2pmIcD7rk0VK!N@E-r&u|5F zZf+jByI;f5&=9lyp|a9W($&=sot<6a^ZD4G-OS9)l8=#*5oVFY<4D#WC0(^#;9V9K z6@kTKVV3AInM~v(Cntwl)KLx0YPCQ^LmdUV@Voy|15T+_l^ z31BvxDQi+6OG`e=UP3~GP%6yK8i4zdfq}(JNl6*W)Rc=^cGKS8LHqCDcQA`O2X+zP zmpN8idW}XUun=Rt!$;oK6j;VMN^|VMW=wUCDb0_ywY8n<>f0njXThwY`KxnGI2Tq{ zR!DGrzmd%`PG4W2AOp1ipiSYuC~JVB#UgUEegDZ!E=MyXL$ z%ox@ltkTkj+3)w09R&m8K_P(#QC{h}5AnHNlu&G~&z{YN=H|zgx&HnEwl_2_EzgA3 z`X`i^mxJAICm)N8i~HLs^1H@X8Jjw6_S6_29)ZEZK`i;D=U-wIh)PKEOK}pKYp!~uI2v{_?I}JtawpunK{_Yi?f9A{dRi=jr?4Ebl6RB ztX3;YICvb2U*Zc3Uxmjt0Xm(IY8StIzyCX3P%Ip-V>u8LQ==&Tcj0tCfzi=XsI9#t zEY2me%!LEX3%+%GX#}MIE@W?|(Rc*X)6*d_F_Cn9gqXQV;H|Z^y6=Vme|w_k{~yI@ z(af)W44X0hm%u;UV+D)nxAm_~3(YY@797$V;5Sm(Q|lQrLa6`%002ovPDHLkV1kYJ B87Ke% diff --git a/src/assets/icons/qr.svg b/src/assets/icons/qr.svg new file mode 100644 index 0000000..f9de895 --- /dev/null +++ b/src/assets/icons/qr.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/Home/HomeStatic/Flex/index.js b/src/views/Home/HomeStatic/Flex/index.js new file mode 100644 index 0000000..7b41035 --- /dev/null +++ b/src/views/Home/HomeStatic/Flex/index.js @@ -0,0 +1,36 @@ +import React from 'react'; + +const maxMobileSize = 550; + +const fontSize = { + h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 28, + span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, +}; + +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, + color: data.color, + + } + return( +
+
+

{data.title}

+ { + data.badge ? + {data.badge} : null + } + {data.subTitle} +
+ {data.title} +
+ ); +} + + + diff --git a/src/views/Home/HomeStatic/Identifier/index.js b/src/views/Home/HomeStatic/Identifier/index.js new file mode 100644 index 0000000..ce5c0bf --- /dev/null +++ b/src/views/Home/HomeStatic/Identifier/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import Flex from '../Flex/index'; +import Simple from '../Simple/index'; + +export default function Identifier(props){ + const {data} = props; + return( + <> + { + data.design === 'flex' ? + : null + } + { + data.design === 'simple' ? + : null + } + + ); +} \ No newline at end of file diff --git a/src/views/Home/HomeStatic/Simple/index.js b/src/views/Home/HomeStatic/Simple/index.js new file mode 100644 index 0000000..1b8bb26 --- /dev/null +++ b/src/views/Home/HomeStatic/Simple/index.js @@ -0,0 +1,29 @@ +import React from 'react'; + +const maxMobileSize = 550; + +const fontSize = { + h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 28, + span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, +}; + +export default function Simple(props){ + + const {data} = props; + const style = { + backgroundImage: `url('${data.imageUrl}')`, + backgroundColor: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, + flex: data.flex, + margin: 5, + borderRadius: 10, + color: data.color, + }; + return( +
+

{data.title}

+
+ ); +} + + + diff --git a/src/views/Home/HomeStatic/index.js b/src/views/Home/HomeStatic/index.js index c10b532..2d8a9a5 100644 --- a/src/views/Home/HomeStatic/index.js +++ b/src/views/Home/HomeStatic/index.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import Identifier from "./Identifier/index"; import "./index.scss"; @@ -13,35 +14,56 @@ const fontSize = { export default class HomeStatic extends Component { render() { - const { data, height, title } = this.props; + const { data, height, title, designType } = this.props; return ( -
- {title ? ( -
-

{title}

-
- موارد بیشتر - + <> + { + window.innerWidth > 1000 ? +
+ {title ? ( +
+

{title}

+
+ موارد بیشتر + +
+
+ ) : null} +
+ {data.map((item, i) => ( + + ))}
-
- ) : null} -
- {data.map((item, i) => ( - - ))} -
-
+ : null + } + { + window.innerWidth < 1000 ? +
+ { + data.map((item,i) => ( + + )) + } +
: null + } + ); } } @@ -64,22 +86,7 @@ const Item = (props) => { عکس ) : null} - { - window.innerWidth < 1000 ? ( -
-
-

{props.data.topText}

-

{props.data.bottomText}

-
- عکس -
- ) : null - } ); }; + diff --git a/src/views/Home/HomeStatic/index.scss b/src/views/Home/HomeStatic/index.scss index df30a4c..a2416cf 100644 --- a/src/views/Home/HomeStatic/index.scss +++ b/src/views/Home/HomeStatic/index.scss @@ -27,22 +27,29 @@ } -.mobile-static{ - div{ - h1{ - font-size: calc(100vw / 27); - letter-spacing: -1px; - margin-bottom: 5px; - } - h2{ - font-size: calc(100vw / 35); - letter-spacing: -1px; - margin-bottom: 0px; +.mobile-home-static{ + &__flex{ + padding: 0px 10px; + img { + // margin-right: 20px; + height: 40px; + width: 40px; + // max-width: 80px; + // max-width: 80px; + } + &--right{ + margin-left: 10px; + h1{ + font-family: numeralBold; + text-align: justify; + } + span{ + letter-spacing: -1px; + } } } - img { - // margin-right: 20px; - height: 50px; - width: 50px; + &__simple{ + padding: 0px 10px; + } } \ No newline at end of file diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js index 20c0590..ef86774 100644 --- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js +++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js @@ -13,7 +13,7 @@ import user1 from "../../../../../assets/images/user1.png"; import user2 from "../../../../../assets/images/user2.png"; import mobileHome from "../../../../../assets/icons/mobileHome.svg"; import mobileAr from "../../../../../assets/icons/mobileAr.svg"; -import qrcode from "../../../../../assets/icons/qr-code.svg"; +import qrcode from "../../../../../assets/icons/qr.svg"; import mobileBasket from "../../../../../assets/icons/mobileBasket.svg"; import mobileBlog from "../../../../../assets/icons/mobileBlog.svg"; import mobileMail from "../../../../../assets/icons/mobileMail.svg"; diff --git a/src/views/Home/index.js b/src/views/Home/index.js index c0648b7..28f07a3 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -24,465 +24,19 @@ import book5 from '../../assets/images/book5.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/ar.png"; -import qr from "../../assets/icons/qr.png"; +import ar from "../../assets/icons/qr.svg"; +import qr from "../../assets/icons/qr.svg"; import "./index.scss"; export default class Home extends Component { constructor(props) { super(props); this.state = { - homeData: [ - { - type: "slider", - title: "", - height: window.innerWidth > 1000 ? 370 : 233, - design: "header", - number: 1, - data: [ - { - id: 0, - image: pic1, - width: "100%", - backgroundColor: "rgba(18, 159, 253,0.6)", - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", - link: '', - buttonText: 'اطلاعات بیشتر' - }, - { - id: 1, - image: pic1, - width: "100%", - backgroundColor: "rgba(18, 159, 253,0.6)", - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", - link: '', - buttonText: 'اطلاعات بیشتر' - }, - { - id: 2, - image: pic1, - width: "100%", - backgroundColor: "rgba(18, 159, 253,0.6)", - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", - link: '', - buttonText: 'اطلاعات بیشتر' - }, - ], - }, - { - type: window.innerWidth > 1000 ? '' : "static", - title: "", - height: 150, - data: [ - { - image: qr, - width: 48, - link: "", - topText: 'QR خوان', - bottomText: 'توضیحات مختصر در این رابطه' - }, - { - image: ar, - width: 48, - link: "", - topText: 'واقعیت افزوده', - bottomText: 'توضیحات مختصر در این رابطه' - }, - ], - }, - { - type: window.innerWidth > 1000 ? "static" : "", - title: "", - height: 150, - data: [ - { - image: online, - width: 24, - link: "", - topText: 'دسترسی به محتوای آموزشی', - bottomText: 'از تمامی دستگاهها' - }, - { - image: chemistry, - width: 24, - link: "", - topText: ' به صورت زنده و جالب انگیز', - bottomText: 'آزمایش انجام دهید' - }, - { - image: calculator, - width: 24, - link: "", - topText: 'به صرفه تر هزینه کنید', - bottomText: 'با خرید یکی دوتا ببرید' - }, - { - image: homework, - width: 24, - link: "", - topText: 'به صورت کاملا تعاملی', - bottomText: 'درسهای خود را یاد بگیرید' - }, - ], - }, - { - type: "search", - data: ["همه", "پرفروش"], - }, - { - 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: window.innerWidth < 1000 ? '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, - image: book1, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '78.000', - oldPrice: '', - date : new Date(), - }, - { - id: 1, - image: book2, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '39.000', - oldPrice: '59.000', - date : new Date(), - }, - { - id: 2, - image: book3, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '21.000', - oldPrice: '', - }, - { - id: 3, - image: book4, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '', - oldPrice: '', - }, - { - id: 4, - image: book5, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه هفتم ابتدایی", - price : '59.000', - oldPrice: '', - }, - { - id: 5, - image: book1, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '78.000', - oldPrice: '', - date : new Date(), - }, - { - id: 6, - image: book2, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '39.000', - oldPrice: '59.000', - date : new Date(), - }, - { - id: 7, - image: book3, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '21.000', - oldPrice: '', - date : new Date(), - }, - { - id: 8, - image: book4, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '', - oldPrice: '', - date : new Date(), - }, - { - id: 9, - image: book5, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه هفتم ابتدایی", - price : '59.000', - oldPrice: '', - date : new Date(), - }, - ], - }, - { - type: window.innerWidth > 1000 ? "slider" : "scroll", - title: "جدیدترین کتاب‌های دانوین", - height: window.innerWidth > 1000 ? 470 : 320, - design: window.innerWidth > 1000 ? "tab" : 'product', - number: window.innerWidth > 1000 ? 4 : 3.5, - moreText: 'لیست کتاب‌ها', - data: [ - { - id: 0, - image: book1, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '78.000', - oldPrice: '', - date : new Date(), - }, - { - id: 1, - image: book2, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '39.000', - oldPrice: '59.000', - date : new Date(), - }, - { - id: 2, - image: book3, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '21.000', - oldPrice: '', - }, - { - id: 3, - image: book4, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '', - oldPrice: '', - }, - { - id: 4, - image: book5, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه هفتم ابتدایی", - price : '59.000', - oldPrice: '', - }, - { - id: 5, - image: book1, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '78.000', - oldPrice: '', - date : new Date(), - }, - { - id: 6, - image: book2, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '39.000', - oldPrice: '59.000', - date : new Date(), - }, - { - id: 7, - image: book3, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه ششم ابتدایی", - price : '21.000', - oldPrice: '', - date : new Date(), - }, - { - id: 8, - image: book4, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه دهم ابتدایی", - price : '', - oldPrice: '', - date : new Date(), - }, - { - id: 9, - image: book5, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "پایه هفتم ابتدایی", - price : '59.000', - oldPrice: '', - date : new Date(), - }, - ], - }, - { - type: 'singleBlog', - height : 350, - direction: 'rtl', - data: { - id: 0, - image: pic, - video : null, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", - link: '', - buttonText: 'اطلاعات بیشتر' - } - }, - { - type: "slider", - title: "بلاگ", - height: '', - design: "blog", - number: window.innerWidth > 1000 ? 3 : 2, - data: [ - { - id: 0, - image: blog1, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", - date : new Date(), - link: '', - buttonText: 'ادامه مطلب', - category: {name : 'علمی تخیلی', color: 'red'}, - duration: '۲۰ دقیقه', - }, - { - id: 1, - image: blog2, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", - date : new Date(), - link: '', - buttonText: 'ادامه مطلب', - category: {name: 'تاریخی', color: 'blue'}, - duration: '۲۰ دقیقه' - }, - { - id: 2, - image: blog3, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", - link: '', - buttonText: 'ادامه مطلب', - category: {name : 'ورزشی', color: 'green'}, - duration: '۲۰ دقیقه' - }, - { - id: 3, - image: pic, - title: "منفجر کردن مغز خود را به ما بسپارید", - subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", - link: '', - buttonText: 'ادامه مطلب', - category: {name: 'سیاسی', color: 'purple'}, - duration: '۲۰ دقیقه' - }, - ], - }, - { - type: "membership", - }, - - ], + }; } render() { - const { homeData } = this.state; + const { homeData, mobileData } = this.props; return ( <> { @@ -502,7 +56,7 @@ export default class Home extends Component { <>
- {homeData.map((item, i) => ( + {mobileData.map((item, i) => ( ))}
@@ -528,6 +82,7 @@ const Identifier = (props) => { height={props.item.height} title={props.item.title} data={props.item.data} + designType={props.item.design} /> ) : null} {props.item.type === "scroll" ? ( @@ -561,3 +116,577 @@ const Identifier = (props) => { ); }; + + +Home.defaultProps = { + mobileData : [ + { + type: "slider", + title: "", + height: window.innerWidth > 1000 ? 370 : 233, + design: "header", + number: 1, + data: [ + { + id: 0, + image: pic1, + width: "100%", + backgroundColor: "rgba(18, 159, 253,0.6)", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", + link: '', + buttonText: 'اطلاعات بیشتر' + }, + { + id: 1, + image: pic1, + width: "100%", + backgroundColor: "rgba(18, 159, 253,0.6)", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", + link: '', + buttonText: 'اطلاعات بیشتر' + }, + { + id: 2, + image: pic1, + width: "100%", + backgroundColor: "rgba(18, 159, 253,0.6)", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", + link: '', + buttonText: 'اطلاعات بیشتر' + }, + ], + }, + { + type: "static", + title: "", + height: 160, + data : [ + { + id: 0, + imageUrl: qr, + backgroundColor : { + first: '#2070CBED', + second: '#2070CBED', + angle: '180deg' + }, + design: "flex", + title: "QR خوان", + subTitle: "در صفحات کتاب هوشمند", + link: '', + badge : '', + flex : 1, + fontSize : 'large', + color: 'white', + }, + { + id: 1, + imageUrl: ar, + backgroundColor : { + first: '#09DA76', + second: '#056D3B', + angle: '230deg' + }, + design: "flex", + title: "واقعیت افزوده", + subTitle: "توضیحات مختصر در این رابطه", + link: '', + badge : '', + flex : 1, + fontSize : 'large', + color: 'white', + }, + ] + }, + { + type: "static", + title: "", + height: 160, + data : [ + { + id: 0, + imageUrl: qr, + backgroundColor : { + first: '#0AB81B', + second: '#6CFF61', + angle: '110deg' + }, + design: "flex", + title: "دانوینی ها", + subTitle: "", + link: '', + badge : '5 پیام جدید', + flex : 1.6, + fontSize : 'normal', + color: 'white', + }, + { + id: 1, + imageUrl: ar, + backgroundColor : { + first: '#9446FCaa', + second: '#9446FCaa', + angle: '180deg' + }, + design: "simple", + title: "واقعیت افزوده", + subTitle: "", + link: '', + badge : '', + flex : 1, + fontSize : 'large', + color: 'white', + }, + ] + } + ], + homeData: [ + { + type: "slider", + title: "", + height: window.innerWidth > 1000 ? 370 : 233, + design: "header", + number: 1, + data: [ + { + id: 0, + image: pic1, + width: "100%", + backgroundColor: "rgba(18, 159, 253,0.6)", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", + link: '', + buttonText: 'اطلاعات بیشتر' + }, + { + id: 1, + image: pic1, + width: "100%", + backgroundColor: "rgba(18, 159, 253,0.6)", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", + link: '', + buttonText: 'اطلاعات بیشتر' + }, + { + id: 2, + image: pic1, + width: "100%", + backgroundColor: "rgba(18, 159, 253,0.6)", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", + link: '', + buttonText: 'اطلاعات بیشتر' + }, + ], + }, + { + type: window.innerWidth > 1000 ? '' : "static", + title: "", + height: 150, + data: [ + { + image: qr, + width: 48, + link: "", + topText: 'QR خوان', + bottomText: 'توضیحات مختصر در این رابطه' + }, + { + image: ar, + width: 48, + link: "", + topText: 'واقعیت افزوده', + bottomText: 'توضیحات مختصر در این رابطه' + }, + ], + }, + { + type: window.innerWidth > 1000 ? "static" : "", + title: "", + height: 150, + data: [ + { + image: online, + width: 24, + link: "", + topText: 'دسترسی به محتوای آموزشی', + bottomText: 'از تمامی دستگاهها' + }, + { + image: chemistry, + width: 24, + link: "", + topText: ' به صورت زنده و جالب انگیز', + bottomText: 'آزمایش انجام دهید' + }, + { + image: calculator, + width: 24, + link: "", + topText: 'به صرفه تر هزینه کنید', + bottomText: 'با خرید یکی دوتا ببرید' + }, + { + image: homework, + width: 24, + link: "", + topText: 'به صورت کاملا تعاملی', + bottomText: 'درسهای خود را یاد بگیرید' + }, + ], + }, + { + type: "search", + data: ["همه", "پرفروش"], + }, + { + 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: window.innerWidth < 1000 ? '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, + image: book1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 1, + image: book2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 2, + image: book3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + }, + { + id: 3, + image: book4, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + }, + { + id: 4, + image: book5, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + }, + { + id: 5, + image: book1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 6, + image: book2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 7, + image: book3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + date : new Date(), + }, + { + id: 8, + image: book4, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + date : new Date(), + }, + { + id: 9, + image: book5, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + date : new Date(), + }, + ], + }, + { + type: window.innerWidth > 1000 ? "slider" : "scroll", + title: "جدیدترین کتاب‌های دانوین", + height: window.innerWidth > 1000 ? 470 : 320, + design: window.innerWidth > 1000 ? "tab" : 'product', + number: window.innerWidth > 1000 ? 4 : 3.5, + moreText: 'لیست کتاب‌ها', + data: [ + { + id: 0, + image: book1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 1, + image: book2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 2, + image: book3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + }, + { + id: 3, + image: book4, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + }, + { + id: 4, + image: book5, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + }, + { + id: 5, + image: book1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 6, + image: book2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 7, + image: book3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + date : new Date(), + }, + { + id: 8, + image: book4, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + date : new Date(), + }, + { + id: 9, + image: book5, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + date : new Date(), + }, + ], + }, + { + type: 'singleBlog', + height : 350, + direction: 'rtl', + data: { + id: 0, + image: pic, + video : null, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", + link: '', + buttonText: 'اطلاعات بیشتر' + } + }, + { + type: "slider", + title: "بلاگ", + height: '', + design: "blog", + number: window.innerWidth > 1000 ? 3 : 2, + data: [ + { + id: 0, + image: blog1, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", + date : new Date(), + link: '', + buttonText: 'ادامه مطلب', + category: {name : 'علمی تخیلی', color: 'red'}, + duration: '۲۰ دقیقه', + }, + { + id: 1, + image: blog2, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", + date : new Date(), + link: '', + buttonText: 'ادامه مطلب', + category: {name: 'تاریخی', color: 'blue'}, + duration: '۲۰ دقیقه' + }, + { + id: 2, + image: blog3, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", + link: '', + buttonText: 'ادامه مطلب', + category: {name : 'ورزشی', color: 'green'}, + duration: '۲۰ دقیقه' + }, + { + id: 3, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ", + link: '', + buttonText: 'ادامه مطلب', + category: {name: 'سیاسی', color: 'purple'}, + duration: '۲۰ دقیقه' + }, + ], + }, + { + type: "membership", + }, + + ], +}