reza added sample

src/AppRouter.js

@@ -8,6 +8,7 @@ import Contact from './views/Contact/index';
 import About from './views/About/index';
 import Products from './views/Products/index';
 import Product from './views/Product/index';
+import Sample from './views/Product/Sample/index';
 class AppRouter extends Component {
   constructor(props) {
     super(props);
@@ -44,6 +45,9 @@ class AppRouter extends Component {
           <Route exact path={'/products/:id'}>
             <Product />
           </Route>
+          <Route exact path={'/products/:id/sample'}>
+            <Sample />
+          </Route>
         </Switch>
       </Router>
     );

src/views/Home/HomeScroll/MyProduct/index.scss

@@ -1,6 +1,6 @@
 .scroll-my-product{
   padding: 10px;
-  background-color: #ddd;
+  background-color: #eee;
   a{
     width : 100%;
     text-decoration: none;

src/views/Home/HomeStatic/index.js

@@ -39,21 +39,38 @@ export default class HomeStatic extends Component {
 
 const Item = (props) => {
   return (
-    <div
+    <>
-      style={{
+      {window.innerWidth > 1000 ? (
-        width: `${props.data.width}%`,
+        <div
-        height: props.height,
+          style={{
-      }}
+            width: `${props.data.width}%`,
-      className="home-static__list--item d-flex"
+            height: props.height,
-    >
+          }}
-      <div className="d-flex flex-column">
+          className="home-static__list--item d-flex"
-        <h2 style={{color : '#02733c'}}>{props.data.topText}</h2>
+        >
-        <h2 style={{color : '#7dc241'}}>{props.data.bottomText}</h2>
+          <div className="d-flex flex-column">
-      </div>
+            <h2 style={{ color: "#02733c" }}>{props.data.topText}</h2>
-      <img
+            <h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
-        src={props.data.image}
+          </div>
-        alt="عکس"
+          <img src={props.data.image} alt="عکس" />
-      />
+        </div>
-    </div>
+      ) : null}
+      {
+        window.innerWidth < 1000 ? (
+          <div
+            style={{
+              width: `${props.data.width}%`,
+            }}
+            className="home-static__list--item d-flex p-2 mobile-static"
+          >
+            <div className="d-flex flex-column">
+              <h1 style={{ color: "#02733c" }}>{props.data.topText}</h1>
+              <h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
+            </div>
+            <img src={props.data.image} alt="عکس" />
+          </div>
+        ) : null
+      }
+    </>
   );
 };

src/views/Home/HomeStatic/index.scss

@@ -24,4 +24,25 @@
       }
     }
   }
+}
+
+
+.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;
+    }
+  }
+  img {
+    // margin-right: 20px;
+    height: 50px;
+    width: 50px;
+  }
 }

src/views/Home/Navbar/Mobile/index.js

@@ -6,8 +6,6 @@ import clsx from "clsx";
 
 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";
@@ -75,8 +73,6 @@ export default function MobileNavbar(props) {
       </div>
       <div className="mobile-navbar__left">
         <img src={search} alt="جستجو" />
-        <img src={ar} alt="واقعیت افزوده" className="m-2" />
-        <img src={qr} alt="کد QR" />
       </div>
       <SwipeableDrawer
         anchor="right"

src/views/Home/index.js

@@ -24,7 +24,8 @@ 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 "./index.scss";
 export default class Home extends Component {
@@ -71,9 +72,29 @@ export default class Home extends Component {
             },
           ],
         },
-
         {
-          type: "static",
+          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: [
@@ -502,7 +523,7 @@ const Identifier = (props) => {
           data={props.item.data}
         />
       ) : null}
-      {props.item.type === "static" && window.innerWidth > 1000 ? (
+      {props.item.type === "static" ? (
         <HomeStatic
           height={props.item.height}
           title={props.item.title}

src/views/Product/Sample/index.js

@@ -0,0 +1,113 @@
+import React, { Component } from "react";
+import Navbar from "../../Home/Navbar/index";
+import Footer from "../../Home/Footer/index";
+
+import book2 from "../../../assets/images/book2.png";
+
+import './index.scss';
+export default class Sample extends Component {
+  render() {
+    const { product } = this.props;
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="product-sample d-flex">
+              <Navbar />
+            </div>
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <>
+            <div className="mobile-product-sample d-flex flex-column">
+              <Navbar />
+              <header className="mobile-product-sample__header d-flex">
+                <div className="mobile-product-sample__header--right d-flex">
+                  <img src={product.image} alt={product.title} />
+                </div>
+                <div className="mobile-product-sample__header--left d-flex flex-column">
+                  <h1>{product.title}</h1>
+                  <h2>{product.subTitle}</h2>
+                  <div>
+                     شما در حال مطالعه  <strong>صفحه {product.sample.page}</strong> هستید. 
+                  </div>
+                  <div>
+                    پیشرفت شما در مطالعه کتاب به <span>{product.sample.percent} درصد</span>  رسیده است.
+                  </div>
+                </div>
+              </header>
+            </div>
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+Sample.defaultProps = {
+  product: {
+    id: 1,
+    image: book2,
+    title: "منفجر کردن مغز خود را به ما بسپارید",
+    subTitle: "پایه ششم ابتدایی",
+    price: "39.000",
+    oldPrice: "59.000",
+    date: new Date(),
+    sample: {
+      page: 67,
+      percent: 60,
+    },
+    abstraction:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
+    modules: [
+      "پک هدیه شامل یک عدد جلد سخت",
+      "عینک واقعیت مجازی",
+      "کارت گرافیک مناسب جهت اجرای بازی",
+    ],
+    tips: [
+      "پک هدیه شامل یک عدد جلد سخت",
+      "عینک واقعیت مجازی",
+      "کارت گرافیک مناسب جهت اجرای بازی",
+    ],
+    description:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
+    comments: [
+      {
+        id: 0,
+        username: "محمدرضا",
+        date: new Date(),
+        text: "عالی بود. ممنون از سایت زیباتون",
+        score: 4,
+      },
+      {
+        id: 1,
+        username: "محمدرضا",
+        date: new Date(),
+        text: "عالی بود. ممنون از سایت زیباتون",
+        score: 2.5,
+      },
+      {
+        id: 2,
+        username: "محمدرضا",
+        date: new Date(),
+        text: "عالی بود. ممنون از سایت زیباتون",
+        score: 5,
+      },
+      {
+        id: 3,
+        username: "محمدرضا",
+        date: new Date(),
+        text: "عالی بود. ممنون از سایت زیباتون",
+        score: 3.7,
+      },
+      {
+        id: 4,
+        username: "محمدرضا",
+        date: new Date(),
+        text: "عالی بود. ممنون از سایت زیباتون",
+        score: 2,
+      },
+    ],
+  },
+};

src/views/Product/Sample/index.scss

@@ -0,0 +1,48 @@
+.mobile-product-sample{
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding : 0px 10px 40px;
+  direction: rtl;
+  padding-top: 70px;
+  overflow-x: hidden;
+  &__header{
+    width: 100%;
+    &--right{
+      img{
+        height: 130px;
+      }
+    }
+    &--left{
+      justify-content:center;
+      margin-right : 30px;
+      h1{
+        font-family: numeralBold;
+        font-size: calc(100vw / 25);
+        color: #7DC241;
+        letter-spacing: -1px;
+      }
+      h2{
+        font-family: numeralBold;
+        font-size: calc(100vw / 32);
+        color: #6F7074;
+      }
+      div{
+        font-family: numeralLight;
+        font-size: calc(100vw / 30);
+        color: #6F7074;
+        letter-spacing: -1px;
+        strong{
+          font-family: numeralMedium;
+          font-size: calc(100vw / 30);
+          color: #05dfba;
+        }
+        span{
+          font-family: numeralMedium;
+          font-size: calc(100vw / 30);
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}

src/views/Product/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import {Link} from 'react-router-dom';
 
 import Footer from "../Home/Footer/index";
 import Navbar from "../Home/Navbar/index";
@@ -30,8 +31,8 @@ export default class Product extends Component {
                 <h1>{product.title}</h1>
                 <h2>{product.subTitle}</h2>
                 <div className="d-flex mt-3">
-                  <button className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</button>
+                  <Link to={`/products/${product.id}/sample`} className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</Link>
-                  <button className="mobile-product__header--purchase">خرید کتاب</button>
+                  <Link to={`/products/${product.id}/sample`} className="mobile-product__header--purchase">خرید کتاب</Link>
                 </div>
               </header>
               <div className="mobile-product__abstraction d-flex flex-column">

src/views/Product/index.scss

@@ -23,25 +23,27 @@
       font-size: calc(100vw / 28);
       color: #6f7074;
     }
-    button{
+    a{
       border: 0px;
       font-family: numeralMedium;
       font-size: calc(100vw / 25);
       padding: 15px 0px;
       width: 150px;
+      text-align: center;
       letter-spacing: -1px;
+      text-decoration: none;
     }
     &--purchase{
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
       background-color: #00cc69;
-      color: white;
+      color: white !important;
     }
     &--sampleButton{
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
       background-color: #efefef;
-      color: #6f7074;
+      color: #6f7074 !important;
     }
   }
   &__abstraction{