reza added new home

src/views/Home/HomeStatic/3D/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Flex from '../Flex/index';
+import Simple from '../Simple/index';
+
+export default function Column(props){
+  const {data} = props;
+  const style = {
+    flex: data.flex,
+  }
+  return(
+    <div style={style} className="mobile-home-static__3d d-flex flex-column">
+      {
+        data.subData.map((item,i) => (
+          <SubIdentifier item={item} key={i} />
+        ))
+      }
+    </div>
+  );
+}
+
+const SubIdentifier = (props) => {
+  const {item} = props;
+  return(
+    <>
+      {
+      item.design === 'flex' ?
+      <Flex data={item} /> : null
+      }
+      {
+      item.design === 'simple' ?
+      <Simple data={item} /> : null
+      }
+    </>
+  );
+}

src/views/Home/HomeStatic/Flex/index.js

@@ -3,8 +3,8 @@ 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,
+  h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
+  span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 35,
 };
 
 export default function Flex(props){
@@ -18,7 +18,7 @@ export default function Flex(props){
 
   }
   return(
-    <div className="mobile-home-static__flex d-flex align-items-center justify-content-center" style={style}>
+    <div className="mobile-home-static__flex d-flex align-items-center" style={style}>
       <div className="mobile-home-static__flex--right d-flex flex-column">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
         {

src/views/Home/HomeStatic/Identifier/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Flex from '../Flex/index';
 import Simple from '../Simple/index';
+import Vitrin from '../Vitrin/index';
+import Column from '../3D/index';
 
 export default function Identifier(props){
   const {data} = props;
@@ -14,6 +16,14 @@ export default function Identifier(props){
         data.design === 'simple' ?
         <Simple data={data} /> : null
       }
+      {
+        data.design === 'vitrin' ?
+        <Vitrin data={data} /> : null
+      }
+      {
+        data.design === '3d' ?
+        <Column data={data} /> : null
+      }
     </>
   );
 }

src/views/Home/HomeStatic/Simple/index.js

@@ -10,18 +10,30 @@ const fontSize = {
 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})`,
+  const parentStyle = {
+    // backgroundImage: `url('${data.imageUrl}')`,
+    background: `url('${data.imageUrl}')`,
     flex: data.flex,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '100% 100%',
     margin: 5,
     borderRadius: 10, 
     color: data.color,
+    textAlign: 'center',
+  };
+
+  const childStyle = {
+    background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
+    borderRadius: 10,
+    justifyContent: data.justifyContent,
+    alignItems: data.alignItems
   };
   return(
-    <div className="mobile-home-static__simple d-flex flex-column justify-content-center" style={style}>
+    <div className="mobile-home-static__simple d-flex" style={parentStyle}>
+      <div style={childStyle} className="d-flex">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
       </div>
+    </div>
   );
 }
 

src/views/Home/HomeStatic/Vitrin/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import {Link} from "react-router-dom";
+
+const maxMobileSize = 550;
+
+const fontSize = {
+  h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
+  span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 34,
+};
+
+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})`,
+    flex: data.flex,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '100%',
+    backgroundOpacity: '60%',
+    margin: 5,
+    borderRadius: 10, 
+    color: data.color,
+  };
+
+  return(
+    <div className="mobile-home-static__vitrin d-flex flex-column" style={style}>
+      <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
+      <div className="d-flex align-items-end">
+        {
+          data.books.map((item,i) => (
+            <Item data={item} key={i} />
+          ))
+        }
+        <span style={{fontSize: fontSize.span }}>مشاهده بیشتر</span>
+      </div>
+    </div>
+  );
+}
+
+
+const Item = (props) => {
+  const {data} = props;
+  return(
+    <Link to={'/products/'+ data.id} className="mobile-home-static__vitrin--product d-flex">
+      <img src={data.imageUrl} alt={'عکس محصول'} />
+    </Link>
+  );
+}
+
+
+
+
+

src/views/Home/HomeStatic/index.js

@@ -51,7 +51,6 @@ export default class HomeStatic extends Component {
           window.innerWidth < 1000 ?
           <section
             className="mobile-home-static d-flex"
-            style={{ minHeight : height }}
           >
             {
               data.map((item,i) => (

src/views/Home/HomeStatic/index.scss

@@ -29,13 +29,14 @@
 
 .mobile-home-static{
   &__flex{
-    padding: 0px 10px;
+    padding: 20px 10px;
+    justify-content: space-around;
     img {
       // margin-right: 20px;
-      height: 40px;
-      width: 40px;
-      // max-width: 80px;
-      // max-width: 80px;
+      max-height: 55px;
+      max-width: 55px;
+      width: 40%;
+      height: 70%;
     }
     &--right{
       margin-left: 10px;
@@ -48,8 +49,43 @@
       }
     }
   }
+  &__vitrin{
+    padding: 15px 5px;
+    h1{
+      font-family: numeralBold;
+      text-align: justify;
+    }
+    &--product{
+      width: 24%;
+      margin: 3px;
+      border-radius: 10px;
+      img{
+        width: 100%;
+        height: 70px;
+        border-radius: 10px;
+      }
+    }
+    span{
+      font-family: numeralLight;
+      align-items: flex-end;
+      margin-bottom: 5px;
+      letter-spacing: -1px;
+      margin-right: 5px;
+    }
+  }
   &__simple{
-    padding: 0px 10px;
+    // padding: 0px 10px;
+    min-height: 50px;
+    div{
+      width: 100%;
+      height: 100%;
+      padding: 0px 3px;
+      h1{
+        font-family: numeralBold;
+        text-align: justify;
+        margin: 0px;
+      }
+    }
     
   }
 }

src/views/Home/index.js

@@ -26,6 +26,9 @@ 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 {
@@ -123,7 +126,7 @@ Home.defaultProps = {
     {
       type: "slider",
       title: "",
-      height: window.innerWidth > 1000 ? 370 : 233,
+      height: window.innerWidth > 1000 ? 370 : 203,
       design: "header",
       number: 1,
       data: [
@@ -224,7 +227,7 @@ Home.defaultProps = {
         },
         {
           id: 1,
-          imageUrl: ar,
+          imageUrl: myBook,
           backgroundColor : {
             first: '#9446FCaa',
             second: '#9446FCaa',
@@ -233,6 +236,128 @@ Home.defaultProps = {
           design: "simple",
           title: "واقعیت افزوده",
           subTitle: "",
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          link: '',
+          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: '',
+          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: '',
+          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: '',
+              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: '',
+              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: '',
           badge : '',
           flex : 1,

src/views/Home/index.scss

@@ -14,5 +14,5 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 90px;
+  padding-top: 70px;
 }

src/views/Product/Comment/index.js

@@ -1,7 +1,5 @@
 import React from "react";
 import moment from "jalali-moment";
-import Reply from './Reply/index';
-
 import "./index.scss";
 
 const maxDesktopSize = 1250;
@@ -28,15 +26,13 @@ export default function Comment(props) {
           <strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
           <p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
           <span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
-          {comment.reply ? <Reply reply={comment.reply} /> : null}
         </div>
       ) : null}
       {window.innerWidth > 1000 ? (
         <div className="comment d-flex flex-column">
-          <strong className="comment__user" style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
-          <p className="comment__text" style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
-          <span className="comment__date" style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
-          {comment.reply ? <Reply reply={comment.reply} /> : null}
+          <strong style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
+          <p style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
+          <span style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
         </div>
       ) : null}
     </>