diff --git a/src/assets/main/notes_mobile.png b/src/assets/main/notes_mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4898a3b0a87bca1604a3586a813ed2b4413f615
Binary files /dev/null and b/src/assets/main/notes_mobile.png differ
diff --git a/src/assets/main/vscode_mobile.png b/src/assets/main/vscode_mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..9815b0358f3c9eeaa34833a2c0c3bfbbd513242a
Binary files /dev/null and b/src/assets/main/vscode_mobile.png differ
diff --git a/src/assets/main/vscode_mobile2.png b/src/assets/main/vscode_mobile2.png
new file mode 100644
index 0000000000000000000000000000000000000000..269ee7369056109b487e334384e5fdd6060d921e
Binary files /dev/null and b/src/assets/main/vscode_mobile2.png differ
diff --git a/src/index.scss b/src/index.scss
index 6812b4636ca21b161e07289f9b3ebe0ebe705c5f..bd592cfa3df1d3f1ea5d5084d26cfadaf6e900a8 100644
--- a/src/index.scss
+++ b/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;
}
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index 7eefa788ca128d310a8e08973650f09a2f107868..3b396635a8b9be1ed7c0f5e88c4b99919abb8bd2 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/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;
diff --git a/src/js/sections/BottomSection/BottomSection.js b/src/js/sections/BottomSection/BottomSection.js
index 6472b9395cbc0299c902ad2ce62756217db939a8..6333be3f0540edd0df957aad9e7f1f834be2d593 100644
--- a/src/js/sections/BottomSection/BottomSection.js
+++ b/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>
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 34e621ba39fd496ef3e0587dd033e0c49d305ebc..8456658b35ab12e29bb3bf91e3e2618a2fac0219 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/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
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 93937e560ffdc83718e72e428d859d4d28f96825..9684a78b762ef1b4a81d820f3cf28332dbfa1887 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -106,4 +106,18 @@
}
}
}
-}
\ No newline at end of file
+}
+
+@media (max-width: 575.98px) {
+ .CloudSection {
+ .UpperBlock {
+ margin-top: 10%;
+ }
+ }
+}
+
+@media (max-width: 320px) {
+ .CloudSection {
+ min-height: 40vh;
+ }
+}
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index f20e9d91542698db0724b43aca7c24dd23db4afe..33edb6b82ddd7ce9780b49402aa07a30ad5ac6a5 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/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;
+ }
+}
+
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 42f5acbb0e9b7ebb69be2450e161ce40dcd36ed9..7d0fa0a8bde2f46225152229f17116d8d4e4f570 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -46,21 +46,39 @@
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;
}
}
}
}
-}
\ No newline at end of file
+}
+
+
+@media (max-width: 320px) {
+ .LandingSection {
+ min-height: 50vh;
+ }
+}
+
diff --git a/src/js/sections/StatsSection/StatsSection.js b/src/js/sections/StatsSection/StatsSection.js
index cd624ae37d5b594d9711e18f7ffb3c609bdc0c51..a021081721218641db32dfab0da4a8a0cc7ede9e 100644
--- a/src/js/sections/StatsSection/StatsSection.js
+++ b/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>
);
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index ce14e8a2f23212ccadead3d3c6a0c16791b48fcf..0964f6230e350373c315f1f956f971da0a22ccbb 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -155,4 +155,10 @@
}
}
}
+}
+
+@media (max-width: 320px) {
+ .StatsSection {
+ background-position: 15% 101%;
+ }
}
\ No newline at end of file
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 36b3589f4276a5d6762fed345930779bb06448cf..927912b4cf52d150c64bc9007ab7b0fa1d2ac010 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/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
diff --git a/src/js/sections/VscodeSection/VscodeSection.js b/src/js/sections/VscodeSection/VscodeSection.js
index c75bb661c5df48362827825f3c0645a12caa7928..e383812dc340b5931aa20ab0363432b6108aca78 100644
--- a/src/js/sections/VscodeSection/VscodeSection.js
+++ b/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}>
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index 3b2a13a01a9ebd34dd2b4fea7fad9cf98f60c160..73aacf2598e1aed62fabed0369cb29c57366cfad 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/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;
}
}