reza added about

src/router.js

@@ -29,14 +29,12 @@ import Dashboard from "./views/Dashboard";
 import FooterDesign1 from "./components/Footer";
 import Blogs from "./views/Blogs";
 import Blog from "./views/Blog";
+import About from "./views/About";
 
 function Router({
   isDark,
   isMobile,
-  isLogin,
   headerOptions,
-  setDesktopContentTransform,
-  footerOptions,
 }) {
   useEffect(() => {
     window.addEventListener("scroll", () => {
@@ -324,6 +322,23 @@ function Router({
                   }}
                 />
               }
+            />
+             <Route
+              path="/about-us"
+              exact
+              element={
+                <About
+                  headerOptions={{
+                    logo: true,
+                    hamburgerMenu: true,
+                    qr: true,
+                    title: false,
+                    shown: true,
+                    menu: false,
+                    back: false,
+                  }}
+                />
+              }
             />
             <Route path="/dashboard" exact element={<Dashboard />} />
             <Route

src/views/About/index.js

@@ -0,0 +1,121 @@
+import React, { Fragment } from "react";
+import _ from "lodash";
+import './index.scss';
+
+import pic from "./pic.png";
+import aboutLg from "./about-lg.png";
+
+function About({ fury, advantages, keywords, keywords2, first }) {
+  return (
+    <div className={_.join(["about w-11/12 mx-auto flex flex-col"], " ")}>
+      <main className="flex flex-col items-center pt-16">
+        <header>
+          <h1>{first.title}</h1>
+          <p
+            style={{
+              lineHeight: 2,
+            }}
+          >
+            {first.text}
+          </p>
+        </header>
+        <div className="linegr" style={{ width: "100%", height: "4px" }}></div>
+        <div className="about__fury flex">
+          <div className="about__fury--right flex flex-col justify-center">
+            <div className="right-top self-start">
+              <h1>{fury.title}</h1>
+              <p>{fury.text}</p>
+            </div>
+            <div className="right-bottom self-start">
+              <h2>{keywords.title}</h2>
+              <ul>
+                {keywords.list.map((item, i) => (
+                  <Fragment key={i}>
+                    <li style={{ padding: 5 }}>{item}</li>
+                  </Fragment>
+                ))}
+              </ul>
+            </div>
+            <div className="right-bottom self-start">
+              <h2>{keywords2.title}</h2>
+              <ul>
+                {keywords2.list.map((item, i) => (
+                  <Fragment key={i}>
+                    <li
+                      style={{
+                        padding: 5,
+                      }}
+                    >
+                      {item}
+                    </li>
+                  </Fragment>
+                ))}
+              </ul>
+            </div>
+          </div>
+          <div className="about__fury--left flex items-center">
+            <img src={aboutLg} alt="عکس" />
+            {/* {this.props.absoluteImages.map((item, i) => (
+                      <img src={item.imageUrl} className={item.class} alt="عکس" />
+                    ))} */}
+          </div>
+        </div>
+        <div className="about__advantages flex">
+          <div className="about__advantages--right flex">
+            <img src={pic} alt={"عکس"} />
+          </div>
+          <div className="about__advantages--left">
+            <h1>{advantages.title}</h1>
+            <ul>
+              {advantages.list.map((item, i) => (
+                <Fragment key={i}>
+                  <li style={{ padding: 5 }}>{item}</li>
+                </Fragment>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default About;
+
+About.defaultProps = {
+  first: {
+    title: "درباره ما",
+    text: "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است.",
+  },
+  fury: {
+    title: "	ماموریت ما در  دانوین چیست ؟",
+    text: "ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول",
+  },
+
+  keywords: {
+    title: "کیفیت آموزش را بالا میبریم",
+    list: [
+      "شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن",
+      "شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی",
+    ],
+  },
+  keywords2: {
+    title: "جذابیت کلید بهبود یادگیری",
+    list: [
+      "بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین",
+      "سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد",
+      "در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول",
+    ],
+  },
+  advantages: {
+    title: "	مزیت رقابتی دانوین",
+    list: [
+      "بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
+      "دارای رویکرد آموزش سرگرم کننده ",
+      "بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
+      "رویکرد معرفتی-ارزشی",
+      "ویدئو های منحصر بفرد",
+      "متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده",
+    ],
+  },
+};

src/views/About/index.scss

@@ -0,0 +1,457 @@
+$gray : #aaa;
+$green3 : #00cc69;
+
+
+.about {
+  main {
+    li::before {
+      color: $gray;
+      content: "\2022";
+      font-weight: bold;
+      display: inline-block;
+      width: 1em;
+      margin-left: -1em;
+    }
+    ul {
+      list-style: circle !important;
+      margin-top: 10px !important;
+    }
+    p,
+    li {
+      color: $gray;
+      margin-top: 2px;
+      line-height: 1.5;
+    }
+  }
+
+  header {
+    margin-top: 30px;
+    width: 70%;
+    h1 {
+      display: inline;
+      color: $green3;
+    }
+    p {
+      margin-top: 10px;
+      text-align: justify;
+      margin-bottom: 20px;
+    }
+  }
+
+  &__fury {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    justify-content: space-between;
+    &--right {
+      align-items: center;
+      width: 48%;
+      .right-top {
+        h1 {
+          display: inline;
+          letter-spacing: -1px;
+          color: $green3;
+        }
+        p {
+          margin-top: 10px;
+          text-align: justify;
+        }
+      }
+      .right-bottom {
+        margin: 20px 30px 20px 0px;
+        h2 {
+          display: inline;
+          color: $green3;
+        }
+        ul {
+          margin: 0px;
+          // list-style: none;
+          padding: 0px;
+          margin-top: 5px;
+        }
+      }
+    }
+    &--left {
+      width: 48%;
+      height: 100%;
+      position: relative;
+      & img {
+        border-radius: 15px;
+        // position: absolute;
+      }
+    }
+  }
+  &__advantages {
+    width: 100%;
+    height: 300px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    justify-content: space-around;
+    &--right {
+      width: 48%;
+      height: 100%;
+      & img {
+        border-radius: 15px;
+        width: 100%;
+      }
+    }
+    &--left {
+      padding-right: 20px;
+      padding-top: 0px;
+      width: 48%;
+      height: 100%;
+      align-items: flex-end;
+      margin-top: 5px;
+      h1 {
+        display: inline;
+        color: $green3;
+      }
+      ul {
+        margin: 0px;
+        padding: 0px;
+        margin-top: 5px;
+        li {
+          text-align: justify;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .about {
+    header {
+      h1 {
+        font-size: 24px;
+      }
+      p {
+        font-size: 14px;
+      }
+    }
+
+    &__fury {
+      margin-top: 30px;
+      width: 100%;
+      margin-bottom: 30px;
+      justify-content: space-between;
+      &--right {
+        align-items: center;
+        .right-top {
+          h1 {
+            font-size: 23px;
+          }
+          p {
+            font-size: 14px;
+          }
+        }
+        .right-bottom {
+          margin: 20px 30px 20px 0px;
+          h2 {
+            font-size: 18px;
+          }
+          ul {
+            li {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+      &--left {
+        & img {
+          width: 100%;
+        }
+        &__1 {
+          top: 100px;
+          left: 00px;
+          z-index: 100;
+          width: 100%;
+        }
+      }
+    }
+    &__advantages {
+      &--right {
+        & img {
+        }
+      }
+      &--left {
+        h1 {
+          font-size: 18px;
+        }
+        ul {
+          li {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .about {
+    main {
+      padding: 0px 10px;
+    }
+    header {
+      h1 {
+        font-size: calc(100vw / 65);
+      }
+      p {
+        font-size: calc(100vw / 100);
+      }
+    }
+
+    &__fury {
+      margin-top: 30px;
+      width: 100%;
+      margin-bottom: 30px;
+      justify-content: space-between;
+      &--right {
+        align-items: center;
+        .right-top {
+          h1 {
+            font-size: calc(100vw / 60);
+          }
+          p {
+            font-size: calc(100vw / 100);
+          }
+        }
+        .right-bottom {
+          margin: 20px 30px 20px 0px;
+          h2 {
+            font-size: 18px;
+          }
+          ul {
+            li {
+              font-size: calc(100vw / 100);
+            }
+          }
+        }
+      }
+      &--left {
+        & img {
+          width: 100%;
+        }
+        &__1 {
+          top: 100px;
+          left: 00px;
+          z-index: 100;
+          width: 100%;
+        }
+      }
+    }
+    &__advantages {
+      &--right {
+        & img {
+        }
+      }
+      &--left {
+        h1 {
+          font-size:calc(100vw / 65);
+        }
+        ul {
+          li {
+            font-size: calc(100vw / 100);
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width : 641px) and (max-width: 1007px) {
+  .about {
+    main {
+      padding: 0px 30px;
+    }
+    header {
+      margin: 0px;
+      width: 100%;
+      h1 {
+        font-size: calc(100vw / 35);
+      }
+      p {
+        font-size: calc(100vw / 50);
+      }
+    }
+
+    &__fury {
+      flex-direction: column-reverse;
+      margin-top: 30px;
+      &--right {
+        align-items: center;
+        width : 100%;
+        margin-top: 20px;
+        .right-top {
+          h1 {
+            font-size: calc(100vw / 38);
+          }
+          p {
+            font-size: calc(100vw / 55);
+          }
+        }
+        .right-bottom {
+          margin: 20px 30px 0px 0px;
+          h2 {
+            font-size: calc(100vw / 48);
+          }
+          ul {
+            li {
+              font-size: calc(100vw / 55);
+            }
+          }
+        }
+      }
+      &--left {
+        width: 100%;
+        position: static;
+        margin-bottom: 0px;
+        & img {
+          height: 300px;
+          margin: 0px auto;
+          // width: 100%;
+        }
+        &__1 {
+          top: 100px;
+          left: 00px;
+          z-index: 100;
+          width: 100%;
+        }
+      }
+    }
+    &__advantages {
+      position: static;
+      flex-direction: column;
+      height: auto;
+      margin-bottom: 0px;
+      &--right {
+        width: 100%;
+        & img{
+          margin: 0px auto;
+          width: auto;
+          height: 300px;
+        }
+      }
+      &--left {
+        margin-top: 20px;
+        width: 100%;
+        h1 {
+          font-size: calc(100vw / 40);
+        }
+        ul {
+          li {
+            font-size: calc(100vw / 55);
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .about {
+    main {
+      padding: 0px 10px;
+    }
+    header {
+      margin: 0px;
+      width: 100%;
+      h1 {
+        font-size: calc(100vw / 22);
+      }
+      p {
+        font-size: calc(100vw / 35);
+      }
+    }
+
+    &__fury {
+      flex-direction: column-reverse;
+      margin-top: 30px;
+      &--right {
+        align-items: center;
+        width : 100%;
+        margin-top: 20px;
+        .right-top {
+          h1 {
+            font-size: calc(100vw / 24);
+          }
+          p {
+            font-size: calc(100vw / 35);
+          }
+        }
+        .right-bottom {
+          margin: 20px 30px 0px 0px;
+          h2 {
+            font-size: calc(100vw / 30);
+          }
+          ul {
+            li {
+              font-size: calc(100vw / 38);
+            }
+          }
+        }
+      }
+      &--left {
+        width: 100%;
+        position: static;
+        margin-bottom: 0px;
+        & img {
+          width: 100%;
+        }
+        &__1 {
+          top: 100px;
+          left: 00px;
+          z-index: 100;
+          width: 100%;
+        }
+      }
+    }
+    &__advantages {
+      position: static;
+      flex-direction: column;
+      height: auto;
+      margin-bottom: 0px;
+      &--right {
+        width: 100%;
+      }
+      &--left {
+        margin-top: 20px;
+        width: 100%;
+        h1 {
+          font-size: calc(100vw / 26);
+        }
+        ul {
+          li {
+            font-size: calc(100vw / 35);
+          }
+        }
+      }
+    }
+  }
+}
+
+.linegr {
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+100&0+0,0.65+49,0+100 */
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+49,000000+100&0+0,0.51+49,0+100 */
+  background: -moz-linear-gradient(
+    left,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.01) 1%,
+    rgba(255, 255, 255, 0.51) 49%,
+    rgba(255, 255, 255, 0) 100%
+  ); /* FF3.6-15 */
+  background: -webkit-linear-gradient(
+    left,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.01) 1%,
+    rgba(255, 255, 255, 0.51) 49%,
+    rgba(255, 255, 255, 0) 100%
+  ); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.01) 1%,
+    rgba(255, 255, 255, 0.51) 49%,
+    rgba(255, 255, 255, 0) 100%
+  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#ffffffff',GradientType=1 ); /* IE6-9 */
+}

src/views/Products/layouts/Desktop/Main.js

@@ -95,7 +95,7 @@ export const Main = ({ books, grades, sortMethods, filterOptions }) => {
   };
 
   return (
-    <div className="flex flex-col w-3/4 p-4 pb-20 min-h-screen relative">
+    <div className="flex flex-col w-3/4 relative pb-20 min-h-screen" style={{minWidth: 'calc(100% * 3 / 4)'}}>
       <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
         <div className="flex text-sm items-center mx-2">
           <svg
@@ -155,7 +155,6 @@ export const Main = ({ books, grades, sortMethods, filterOptions }) => {
               </g>
             </g>
           </svg>
-
           <span className="text-tiny text-greenBA font-bold">
             {"مرتب سازی" + "" + ":"}
           </span>
@@ -174,7 +173,7 @@ export const Main = ({ books, grades, sortMethods, filterOptions }) => {
       {(filterOptions?.productType
         ? filterOptions.productType === "دوره ویدئویی"
         : true) && (
-        <ScrollingCarousel className="py-3">{Items(2)}</ScrollingCarousel>
+        <ScrollingCarousel className="py-3 max-w-full">{Items(2)}</ScrollingCarousel>
       )}
 
       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">