feat: small mobile responsiveness

src/index.scss

@@ -2,8 +2,7 @@
 
 body {
   margin: 0;
-  font-family: Hiragino Kaku Gothic StdN, sans-serif;
-  font-weight: 800;
+  font-family: $primary_font;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/js/components/TopLinks/TopLinks.module.scss

@@ -7,6 +7,7 @@
   display: flex;
   font-family: $primary_font;
   color: $primary_black;
+  margin: 0 auto;
 
   .Logo {
     float: left;
@@ -29,7 +30,7 @@
     flex-direction: row;
 
     .Link {
-      margin: 0 auto;
+      padding-right: 2%;
       text-align: center;
       min-width: fit-content;
 

src/js/sections/BottomSection/BottomSection.js

@@ -25,7 +25,7 @@ const BottomSection = ({innerRef, contactRef}) => {
                         </p>
                     </div>
                     <div className={styles.ButtonContainer}>
-                        <Button type="link" link={articleLink}>Acceder à l'article</Button>
+                        <Button type="link" link={articleLink} className={styles.ArticleButton}>Acceder à l'article</Button>
                     </div>
                 </div>
 
@@ -41,7 +41,7 @@ const BottomSection = ({innerRef, contactRef}) => {
                         <p className={styles.BigCaption}>
                             Offrez à vos étudiants les meilleurs outils pour apprendre.
                         </p>
-                        <Button type={"link"} link={askForDemoLink}>Contactez-nous</Button>
+                        <Button type={"link"} link={askForDemoLink} className={styles.ContactButton}>Contactez-nous</Button>
                         <p className={styles.SmallCaption}>
                             Pour être les prochains !
                         </p>

src/js/sections/BottomSection/BottomSection.module.scss

@@ -238,7 +238,7 @@
   }
 }
 
-@media (max-width: 414px) {
+@media (max-width: 425px) {
   .BottomSection {
     min-height: 70vh;
   }
@@ -251,10 +251,48 @@
     .BottomBlock {
       .ContactLinks {
         max-width: 50%;
-        Button {
       }
     }
+
+  }
+}
+
+@media (max-width: 320px) {
+  .BottomSection {
+
+    min-height: 55vh;
+    .MiddleBlock {
+
+      .Caption {
+
+        .ButtonContainer {
+          margin-top: 5%;
+          padding-right: 0;
+
+          a {
+            font-size: 3vw;
+          }
+
         }
 
+
+      }
+    }
+
+    .BottomBlock {
+
+      .ContactLinks {
+
+        .BigCaption {
+          font-size: 2.2vw;
+          margin-bottom: 10%;
+        }
+
+        a {
+          font-size: 3vw;
+        }
+
+      }
+    }
   }
 }
\ No newline at end of file

src/js/sections/CloudSection/CloudSection.module.scss

@@ -107,3 +107,17 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .CloudSection {
+    .UpperBlock {
+      margin-top: 10%;
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  .CloudSection {
+    min-height: 40vh;
+  }
+}

src/js/sections/FeatureSection/FeatureSection.module.scss

@@ -99,6 +99,12 @@
   }
 }
 
+@media (max-width: 425px) {
+  .FeatureSection {
+    min-height: 40vh;
+  }
+}
+
 @media (max-width: 375px) {
   .FeatureSection {
     min-height: 50vh;
@@ -120,3 +126,9 @@
   }
 }
 
+@media (max-width: 320px) {
+  .FeatureSection {
+    min-height: 40vh;
+  }
+}
+

src/js/sections/LandingSection/LandingSection.module.scss

@@ -46,17 +46,27 @@
     flex-direction: column;
     text-align: center;
 
-    padding-top: 10%;
-    min-height: 90vh;
+    padding-top: 0;
+    min-height: 55vh;
+
+    .LeftSide {
+
+      .Octopus {
+        width: 50vw;
+        height: 30vh;
+      }
+    }
 
 
     .RightSide {
 
+      text-align: center;
+
       .Title {
         font-size: 10vw;
 
         .Caption {
-          font-size: 4vw;
+          font-size: 3vw;
           text-align: center;
         }
 
@@ -64,3 +74,11 @@
     }
   }
 }
+
+
+@media (max-width: 320px) {
+  .LandingSection {
+    min-height: 50vh;
+  }
+}
+

src/js/sections/StatsSection/StatsSection.js

@@ -2,10 +2,13 @@ import styles from "./StatsSection.module.scss";
 import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
 
 import statsImage from "../../../assets/main/notes.png";
+import statsImageMobile from "../../../assets/main/notes_mobile.png";
+
 
 import {primaryBlack, white} from "../../../style/colors.module.scss";
 
 
+
 const title = [
     {text: "Comment suivre ", color: white},
     {text: "vos étudiants ? ", color: primaryBlack},
@@ -23,7 +26,10 @@ const StatsSection = ({innerRef}) => {
                 </p>
             </div>
             <div className={styles.RightSide}>
-                <img src={statsImage} alt={"notes screen"} className={styles.NotesImage}/>
+                <picture>
+                    <source media={"(max-width : 768px)"} srcSet={statsImageMobile}/>
+                    <img src={statsImage} alt="octopus" className={styles.NotesImage}/>
+                </picture>
             </div>
         </div>
     );

src/js/sections/StatsSection/StatsSection.module.scss

@@ -156,3 +156,9 @@
     }
   }
 }
+
+@media (max-width: 320px) {
+  .StatsSection {
+    background-position: 15% 101%;
+  }
+}
\ No newline at end of file

src/js/sections/TowerSection/TowerSection.module.scss

@@ -80,7 +80,7 @@
 
 @media (max-width: 768px) {
   .TowerSection {
-    min-height: 40vh;
+    min-height: 50vh;
     flex-direction: row;
     justify-content: center;
 
@@ -108,4 +108,9 @@
   }
 }
 
+@media (max-width: 375px) {
+  .TowerSection {
+    min-height: 40vh;
+  }
 
+}
\ No newline at end of file

src/js/sections/VscodeSection/VscodeSection.js

@@ -2,22 +2,26 @@ import styles from "./VscodeSection.module.scss";
 import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
 
 import vscodeImage from "../../../assets/main/vscode_screen.png";
+import vscodeImageMobile from "../../../assets/main/vscode_mobile2.png"
 
 import {primaryBlack, white} from "../../../style/colors.module.scss";
 
 
+
 const vscodeTitle = [
     {text: "Un ", color: white},
     {text: "IDE complet ", color: primaryBlack},
     {text: "pour chacun de vos étudiants", color: white}
 ];
-
 const VscodeSection = ({innerRef}) => {
 
     return (
         <div ref={innerRef} id="VscodeSection" className={styles.VscodeSection}>
             <div className={styles.LeftSide}>
-                <img src={vscodeImage} alt={"vscodeScreen"} className={styles.VscodeImage}/>
+                <picture>
+                    <source media={"(max-width : 425px)"} srcSet={vscodeImageMobile}/>
+                    <img src={vscodeImage} alt="octopus" className={styles.VscodeImage}/>
+                </picture>
             </div>
             <div className={styles.RightSide}>
                 <div className={styles.Title}>

src/js/sections/VscodeSection/VscodeSection.module.scss

@@ -58,7 +58,7 @@
   .VscodeSection {
     flex-direction: column;
     text-align: center;
-    min-height: 50vh;
+    min-height: 60vh;
     background-position: 95% 0;
 
 
@@ -66,7 +66,7 @@
       .VscodeImage {
         margin-top: 2%;
         width: 70vw;
-        height: 30vh;
+        height: 40vh;
       }
     }