reza added about mobile

src/views/About/index.js

@@ -20,6 +20,12 @@ const fontSize = {
     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
     li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
   },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
+    p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
+    h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23,
+    li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28,
+  },
 };
 
 export default class About extends Component {
@@ -121,22 +127,26 @@ export default class About extends Component {
           <div className="mobile-about d-flex flex-column">
             <Navbar page={"about"} />
             <div className="mobile-about__fury d-flex flex-column">
-              <h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
-              <p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
+              <div>
+                <h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1>
+              </div>
+              <p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p>
             </div>
-            <div className="mobile-about__images-- d-flex">
+            <div className="mobile-about__images d-flex">
               {this.props.absoluteImages.map((item, i) => (
                 <img src={item.imageUrl} className={item.class} alt="عکس" />
               ))}
             </div>
-            <div className="right-bottom align-self-end">
-              <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+            <div className="mobile-about__keys align-self-end">
+              <div>
+                <h2 style={{ fontSize: fontSize.mobile.h2 }}>
                   {keywords.title}
                 </h2>
+              </div>
               <ul>
                 {keywords.list.map((item, i) => (
                   <Fragment key={i}>
-                    <li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
+                    <li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
                     <br />
                   </Fragment>
                 ))}
@@ -145,14 +155,16 @@ export default class About extends Component {
             <div className="mobile-about__video d-flex">
               <img src={pic} alt={"عکس"} />
             </div>
-            <div className="mobile-about__advantages--left">
-              <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+            <div className="mobile-about__advantages d-flex flex-column">
+              <div>
+                <h1 style={{ fontSize: fontSize.mobile.h1 }}>
                   {advantages.title}
                 </h1>
+              </div>
               <ul>
                 {advantages.list.map((item, i) => (
                   <Fragment key={i}>
-                    <li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
+                    <li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
                     <br />
                   </Fragment>
                 ))}
@@ -167,9 +179,33 @@ export default class About extends Component {
 
 About.defaultProps = {
   absoluteImages: [
-    { class: "about__fury--left__1", imageUrl: aboutLg },
-    { class: "about__fury--left__2", imageUrl: aboutMd },
-    { class: "about__fury--left__3", imageUrl: aboutXs1 },
-    { class: "about__fury--left__4", imageUrl: aboutXs2 },
+    {
+      class:
+        window.innerWidth > 1000
+          ? "about__fury--left__1"
+          : "mobile-about__images--1",
+      imageUrl: aboutLg,
+    },
+    {
+      class:
+        window.innerWidth > 1000
+          ? "about__fury--left__2"
+          : "mobile-about__images--2",
+      imageUrl: aboutMd,
+    },
+    {
+      class:
+        window.innerWidth > 1000
+          ? "about__fury--left__3"
+          : "mobile-about__images--3",
+      imageUrl: aboutXs1,
+    },
+    {
+      class:
+        window.innerWidth > 1000
+          ? "about__fury--left__4"
+          : "mobile-about__images--4",
+      imageUrl: aboutXs2,
+    },
   ],
 };

src/views/About/index.scss

@@ -138,6 +138,119 @@
   margin: 0px auto;
   padding : 0px 10px 40px;
   direction: rtl;
-  padding-top: 70px;
+  padding-top: 90px;
   overflow-x: hidden;
+  &__fury{
+    h1 {
+      display: inline;
+      letter-spacing: -2px;
+      font-family: numeralBold;
+      background-color: #00CC69;
+      color: white;
+    }
+    p {
+      margin-top: 10px;
+      text-align: justify;
+      font-family: numeralLight;
+      color: #6d6d6d;
+      letter-spacing: -1px;
+    }
+  }
+  &__images{
+    position: relative;
+    height: 330px;
+    width: 100%;
+    & img{
+      position: absolute;
+      
+    }
+    &--1{
+      top:0px;
+      left: calc(100vw / 8);
+      z-index: 100;
+      height: calc(100vw - 100px);
+      width: calc(100vw - 100px);
+      max-width: 275px;
+      max-height: 275px;
+      
+    }
+    &--2{
+      right: -20px;
+      bottom: 70px;
+      z-index: 150;
+      height: calc(100vw / 2.5);
+      width: calc(100vw / 2.5);
+      max-width: 150px;
+      max-height: 150px;
+      
+    }
+    &--3{
+      bottom: -10px;
+      right: -10px;
+      z-index: 200;
+      height: calc(100vw / 3);
+      width: calc(100vw / 3);
+      max-width: 125px;
+      max-height: 125px;
+      
+    }
+    &--4{
+      top: 50px;
+      left: -20px;
+      z-index: 150;
+      height: calc(100vw / 3);
+      width: calc(100vw / 3);
+      max-width: 125px;
+      max-height: 125px;
+    }
+  }
+  &__keys{
+    transform : translateY(-40px);
+    h2 {
+      display: inline;
+      font-family: numeralBold;
+      background-color: #00CC69;
+      color: white;
+    }
+    ul {
+      margin: 0px;
+      list-style: none;
+      padding: 0px;
+      margin-top: 5px;
+      li {
+        display: inline;
+        border-bottom: 2px solid #00CC69;
+        font-family: numeralLight;
+        color: #6d6d6d;
+      }
+    }
+  }
+  &__video{
+    img {
+      width: 100%;
+    }
+  }
+  &__advantages{
+    margin-top: 30px;
+    h1 {
+      display: inline;
+      font-family: numeralBold;
+      background-color: #00CC69;
+      color: white;
+      // margin-bottom: 20px;
+    }
+    ul {
+      margin: 0px;
+      list-style: none;
+      padding: 0px;
+      margin-top: 5px;
+      li {
+        display: inline;
+        text-align: justify;
+        font-family: numeralLight;
+        color: #6d6d6d;
+        margin-bottom: 5px;
+      }
+    }
+  }
 }