import React, { Component } from "react";
import Navbar from "./Navbar";
import HomeHeader from "./HomeHeader/index";
import HomeStatic from "./HomeStatic/index";
import HomeScroll from "./HomeScroll/index";
import Footer from "./Footer/index";
import HomeSlider from "./HomeSlider/index";
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';
import calculator from '../../assets/icons/calculator.png';
import homework from '../../assets/icons/homework.png';
import book1 from '../../assets/images/book1.png';
import book2 from '../../assets/images/book2.png';
import book3 from '../../assets/images/book3.png';
import book4 from '../../assets/images/book4.png';
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/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 "./index.scss";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const { homeData, mobileData } = this.props;
return (
<>
{
window.innerWidth > 1000 ?
<>
{homeData.map((item, i) => (
))}
> : null
}
{
window.innerWidth < 1000 ?
<>
{mobileData.map((item, i) => (
))}
> : null
}
>
);
}
}
const Identifier = (props) => {
return (
<>
{props.item.type === "header" ? (
) : null}
{props.item.type === "static" ? (
) : null}
{props.item.type === "scroll" ? (
) : null}
{props.item.type === "slider" ? (
) : null}
{props.item.type === "search" && window.innerWidth > 1000 ? (
) : null}
{props.item.type === "membership" && window.innerWidth > 1000 ? (
) : null}
{props.item.type === "singleBlog" && window.innerWidth > 1000 ? (
) : null}
>
);
};
Home.defaultProps = {
mobileData : [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 203,
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: '/qr-scan',
badge : '',
flex : 1,
fontSize : 'large',
color: 'white',
},
{
id: 1,
imageUrl: ar,
backgroundColor : {
first: '#09DA76',
second: '#056D3B',
angle: '230deg'
},
design: "flex",
title: "واقعیت افزوده",
subTitle: "توضیحات مختصر در این رابطه",
link: '/ar-scan',
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: '/chatroom',
badge : '5 پیام جدید',
flex : 1.6,
fontSize : 'normal',
color: 'white',
},
{
id: 1,
imageUrl: myBook,
backgroundColor : {
first: '#9446FCaa',
second: '#9446FCaa',
angle: '180deg'
},
design: "simple",
title: "کتابهای من",
subTitle: "",
justifyContent: 'flex-start',
alignItems: 'center',
link: '/mybooks',
badge : '',
flex : 1,
fontSize : 'large',
color: 'white',
},
]
},
{
type: "static",
title: "",
height: 160,
data : [
{
id: 0,
imageUrl: homeBlog,
backgroundColor : {
first: '#39BF55',
second: '#39BF4B55',
angle: '110deg'
},
design: "simple",
title: "بلاگ",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '/blog',
badge : '',
flex : 1.2,
fontSize : 'normal',
color: 'white',
},
{
id: 1,
backgroundColor : {
first: '#5DBEFF',
second: '#0483D9',
angle: '180deg'
},
design: "vitrin",
title: "فروشگاه",
subTitle: "",
justifyContent: 'flex-start',
alignItems: 'center',
books: [
{ id: 0, imageUrl: book1 },
{ id: 1, imageUrl: book2 },
{ id: 2, imageUrl: book3},
],
link: '/products',
badge : '',
flex : 2,
fontSize : 'large',
color: 'white',
},
]
},
{
type: "static",
title: "",
data : [
{
id: 0,
design: "3d",
flex : 1,
subData: [
{
id: 0,
imageUrl: '',
backgroundColor : {
first: '#FC365F',
second: '#7E1B30',
angle: '254deg'
},
design: "simple",
title: "پیشتیبانی",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '/chatroom',
badge : '',
flex : 1,
fontSize : 'normal',
color: 'white',
},
{
id: 1,
imageUrl: '',
backgroundColor : {
first: '#FFCC00',
second: '#FF9800',
angle: '105deg'
},
design: "simple",
title: "پروفایل",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '/profile',
badge : '',
flex : 1,
fontSize : 'normal',
color: 'white',
},
]
},
{
id: 1,
imageUrl : bookActivation,
backgroundColor : {
first: '#03FCDA7F',
second: '#03FCDA7F',
angle: '180deg'
},
design: "simple",
title: "فعال سازی کتاب",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '/activation',
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 ? 340 : 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 ? 420 : 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 ? 420 : 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",
},
],
}