diff --git a/package.json b/package.json
index 0c7fde7be56a82cde31cb2814a44dae5b0d573a5..5a3f31ad89792964ea65f7fa957214b653b79005 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@ant-design/icons": "^4.6.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
diff --git a/src/App.js b/src/App.js
index 89dee0d49eca57f5166bbb93936f1b90e62f9127..29596416d2f21fbdcbbf4f1f695028f07ebebf5a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,11 @@
-import logo from './logo.svg';
-import './App.scss';
+import 'antd/dist/antd.css';
-function App() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
+import MainPage from "./js/pages/MainPage";
+
+const App = () => {
+ return (
+ <MainPage />
+ );
}
export default App;
diff --git a/src/App.scss b/src/App.scss
index 0c2d0fb6a517a9722e455a9d36b2b4556c11da8c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,41 +0,0 @@
-@import 'style/colors';
-@import 'style/fonts';
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: $primary_black;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
- font-family: $primary_font;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/assets/curves/Courbe 1.png b/src/assets/curves/Courbe 1.png
deleted file mode 100644
index 657b478ce320ebf9d3d0ef81b57ce5b48f3409de..0000000000000000000000000000000000000000
Binary files a/src/assets/curves/Courbe 1.png and /dev/null differ
diff --git a/src/assets/curves/courbe_1.png b/src/assets/curves/courbe_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a4326cc16f692097b5464b27880d667d1050a5d
Binary files /dev/null and b/src/assets/curves/courbe_1.png differ
diff --git a/src/assets/curves/Courbe 1.svg b/src/assets/curves/courbe_1.svg
similarity index 100%
rename from src/assets/curves/Courbe 1.svg
rename to src/assets/curves/courbe_1.svg
diff --git a/src/assets/curves/Courbe 2.png b/src/assets/curves/courbe_2.png
similarity index 100%
rename from src/assets/curves/Courbe 2.png
rename to src/assets/curves/courbe_2.png
diff --git a/src/assets/curves/Courbe 2.svg b/src/assets/curves/courbe_2.svg
similarity index 100%
rename from src/assets/curves/Courbe 2.svg
rename to src/assets/curves/courbe_2.svg
diff --git a/src/assets/curves/Courbe 3.png b/src/assets/curves/courbe_3.png
similarity index 100%
rename from src/assets/curves/Courbe 3.png
rename to src/assets/curves/courbe_3.png
diff --git a/src/assets/curves/Courbe 3.svg b/src/assets/curves/courbe_3.svg
similarity index 100%
rename from src/assets/curves/Courbe 3.svg
rename to src/assets/curves/courbe_3.svg
diff --git a/src/assets/curves/Courbe 4.png b/src/assets/curves/courbe_4.png
similarity index 100%
rename from src/assets/curves/Courbe 4.png
rename to src/assets/curves/courbe_4.png
diff --git a/src/assets/curves/Courbe 4.svg b/src/assets/curves/courbe_4.svg
similarity index 100%
rename from src/assets/curves/Courbe 4.svg
rename to src/assets/curves/courbe_4.svg
diff --git a/src/assets/main/poulpe_ludique_big.png b/src/assets/main/poulpe_ludique_big.png
index d62ea1894369dec151f515ab9d7587575439258f..03826a768f04c58a8ca05b50d2ff1a38425234e0 100644
Binary files a/src/assets/main/poulpe_ludique_big.png and b/src/assets/main/poulpe_ludique_big.png differ
diff --git a/src/assets/main/poulpe_ludique_version_mobile.png b/src/assets/main/poulpe_ludique_version_mobile.png
index 1eb5700d4fcb25cec1ae6eb28fd8131428ca32f7..506392d3f6f3b469143c22430c31ba272cc44054 100644
Binary files a/src/assets/main/poulpe_ludique_version_mobile.png and b/src/assets/main/poulpe_ludique_version_mobile.png differ
diff --git a/src/assets/logos/JS.svg b/src/assets/props/JS.svg
similarity index 100%
rename from src/assets/logos/JS.svg
rename to src/assets/props/JS.svg
diff --git a/src/assets/logos/Logo.c++.svg b/src/assets/props/Logo.c++.svg
similarity index 100%
rename from src/assets/logos/Logo.c++.svg
rename to src/assets/props/Logo.c++.svg
diff --git a/src/assets/logos/Logo.go.svg b/src/assets/props/Logo.go.svg
similarity index 100%
rename from src/assets/logos/Logo.go.svg
rename to src/assets/props/Logo.go.svg
diff --git a/src/assets/logos/Logo.java.svg b/src/assets/props/Logo.java.svg
similarity index 100%
rename from src/assets/logos/Logo.java.svg
rename to src/assets/props/Logo.java.svg
diff --git a/src/assets/logos/Logo.kotlin.svg b/src/assets/props/Logo.kotlin.svg
similarity index 100%
rename from src/assets/logos/Logo.kotlin.svg
rename to src/assets/props/Logo.kotlin.svg
diff --git a/src/assets/logos/Logo.python.svg b/src/assets/props/Logo.python.svg
similarity index 100%
rename from src/assets/logos/Logo.python.svg
rename to src/assets/props/Logo.python.svg
diff --git a/src/assets/logos/Logo.ruby.svg b/src/assets/props/Logo.ruby.svg
similarity index 100%
rename from src/assets/logos/Logo.ruby.svg
rename to src/assets/props/Logo.ruby.svg
diff --git a/src/assets/logos/Poulpe.ludique.svg b/src/assets/props/Poulpe.ludique.svg
similarity index 100%
rename from src/assets/logos/Poulpe.ludique.svg
rename to src/assets/props/Poulpe.ludique.svg
diff --git a/src/assets/logos/algue.svg b/src/assets/props/algue.svg
similarity index 100%
rename from src/assets/logos/algue.svg
rename to src/assets/props/algue.svg
diff --git a/src/assets/logos/bateau.svg b/src/assets/props/bateau.svg
similarity index 100%
rename from src/assets/logos/bateau.svg
rename to src/assets/props/bateau.svg
diff --git a/src/assets/logos/donjon.svg b/src/assets/props/donjon.svg
similarity index 100%
rename from src/assets/logos/donjon.svg
rename to src/assets/props/donjon.svg
diff --git a/src/assets/props/epf_logo.png b/src/assets/props/epf_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a512323e12cb0e65e8762aae4bea8796e34c9856
Binary files /dev/null and b/src/assets/props/epf_logo.png differ
diff --git "a/src/assets/logos/e\314\201toile.de.mer.svg" "b/src/assets/props/e\314\201toile.de.mer.svg"
similarity index 100%
rename from "src/assets/logos/e\314\201toile.de.mer.svg"
rename to "src/assets/props/e\314\201toile.de.mer.svg"
diff --git a/src/assets/props/insa_logo.png b/src/assets/props/insa_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f52d38829da743d43c61f01f57f045119d7c0154
Binary files /dev/null and b/src/assets/props/insa_logo.png differ
diff --git a/src/assets/logos/logo.rust.png b/src/assets/props/logo.rust.png
similarity index 100%
rename from src/assets/logos/logo.rust.png
rename to src/assets/props/logo.rust.png
diff --git a/src/assets/logos/personnage.professeur.svg b/src/assets/props/personnage.professeur.svg
similarity index 100%
rename from src/assets/logos/personnage.professeur.svg
rename to src/assets/props/personnage.professeur.svg
diff --git a/src/assets/logos/pieuvre.svg b/src/assets/props/pieuvre.svg
similarity index 100%
rename from src/assets/logos/pieuvre.svg
rename to src/assets/props/pieuvre.svg
diff --git a/src/js/components/Button/Button.js b/src/js/components/Button/Button.js
new file mode 100644
index 0000000000000000000000000000000000000000..b460a6d84468b3592a84c6fd393650e1e3c391e4
--- /dev/null
+++ b/src/js/components/Button/Button.js
@@ -0,0 +1,19 @@
+import {Button as AntButton} from "antd";
+import styles from './Button.module.scss';
+
+const Button = (props) => {
+ return (
+ <AntButton
+ className={styles.TakiButton}
+ type={"primary"}
+ shape={"round"}
+ icon={props.icon}
+ disabled={props.disabled}
+ onClick={props.action}
+ >
+ {props.children}
+ </AntButton>
+ );
+}
+
+export default Button;
\ No newline at end of file
diff --git a/src/js/components/Button/Button.module.scss b/src/js/components/Button/Button.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..af9a9c962caa215981ce746f5f61fe71a8615455
--- /dev/null
+++ b/src/js/components/Button/Button.module.scss
@@ -0,0 +1,21 @@
+@import '../../../style/colors';
+@import '../../../style/fonts';
+
+.TakiButton {
+ font-family: $primary_font;
+ background: $primary_pink;
+ color: white;
+ border-color: $primary_pink;
+
+ &:hover {
+ border-color: white;
+ background-color: $primary_pink;
+ }
+
+ &:focus {
+ background: $primary_pink;
+ border-color: $primary_pink;
+ }
+
+}
+
diff --git a/src/js/components/Link/Link.js b/src/js/components/Link/Link.js
new file mode 100644
index 0000000000000000000000000000000000000000..21d918b32730d28f64c3c3eb73e1be157ed4703d
--- /dev/null
+++ b/src/js/components/Link/Link.js
@@ -0,0 +1,17 @@
+import {Button as AntButton} from "antd";
+import styles from './Link.module.scss';
+
+const Link = (props) => {
+ const {active} = props;
+ return (
+ <AntButton
+ className={styles.TakiLink}
+ type={"link"}
+ active={active}
+ >
+ {props.children}
+ </AntButton>
+ );
+}
+
+export default Link;
\ No newline at end of file
diff --git a/src/js/components/Link/Link.module.scss b/src/js/components/Link/Link.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8cb47ca8068541273782a6e0f3ac0e05785b146f
--- /dev/null
+++ b/src/js/components/Link/Link.module.scss
@@ -0,0 +1,21 @@
+@import '../../../style/colors';
+@import '../../../style/fonts';
+
+.TakiLink {
+ font-family: $primary_font;
+ color: $primary_black;
+ font-weight: $primary_font_weight;
+
+ &:hover {
+ color: $primary_pink;
+ text-underline-position: under;
+ }
+
+ &:focus {
+ color: $primary_pink;
+ }
+
+ &:active {
+ color: $primary_pink;
+ }
+}
diff --git a/src/js/components/MultiColoredText/MultiColoredText.js b/src/js/components/MultiColoredText/MultiColoredText.js
new file mode 100644
index 0000000000000000000000000000000000000000..b12b35f8c9b59023aaf4a46b4d5039b5bc5f6cd1
--- /dev/null
+++ b/src/js/components/MultiColoredText/MultiColoredText.js
@@ -0,0 +1,14 @@
+const MultiColoredText = (props) => {
+ const {content} = props;
+ // content = [{text, color}]
+ return (
+ <div>
+ {content.map((part) => {
+ return <span style={{color: part.color}}>{part.text}</span>
+ })
+ }
+ </div>
+ );
+};
+
+export default MultiColoredText;
\ No newline at end of file
diff --git a/src/js/components/MultiColoredText/MultiColoredText.module.scss b/src/js/components/MultiColoredText/MultiColoredText.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/js/components/TopLinks/TopLInks.js b/src/js/components/TopLinks/TopLInks.js
new file mode 100644
index 0000000000000000000000000000000000000000..bdad68297e479bcfb4d43bc8d62f8be99b410170
--- /dev/null
+++ b/src/js/components/TopLinks/TopLInks.js
@@ -0,0 +1,18 @@
+import Link from "../Link/Link";
+
+
+const TopLinks = () => {
+ return (
+ <div className="top-links">
+ <div className="logo">DEADLOCK</div>
+ <Link>Un IDE complet</Link>
+ <Link>L'algorithme est votre mâitre mot ?</Link>
+ <Link>Comment suivre vos étudiants ?</Link>
+ <Link>Apprendre de manière ludique</Link>
+ <Link>Article</Link>
+ <Link>Contact</Link>
+ </div>
+ );
+}
+
+export default TopLinks;
\ No newline at end of file
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6f725ad1feda997f693ebfef21f6a5647dc3a09
--- /dev/null
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -0,0 +1,15 @@
+@import '../../../style/colors';
+@import '../../../style/fonts';
+
+.logo {
+ float: left;
+ max-width: 5vw;
+ max-height: 3vh;
+ font-size: 3rem;
+ font-family: $primary_font;
+}
+
+.top-links {
+ font-family: $primary_font;
+ font-size: 3rem;
+}
\ No newline at end of file
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e0f549157550f4928db01ccbe3770e68d2fc69bd
--- /dev/null
+++ b/src/js/pages/MainPage,module.scss
@@ -0,0 +1,36 @@
+@import '../../style/colors';
+@import '../../style/fonts';
+
+
+
+.top-bar{
+ background: $primary_beige;
+ position: fixed;
+ z-index: 1;
+ width: 100%;
+
+ .logo {
+ float: left;
+ width: 120px;
+ height: 31px;
+ font-size: 12px;
+ font-family: $primary_font;
+ }
+
+ .top-links {
+ font-family: $primary_font;
+ font-size: 12px;
+ }
+
+}
+
+.site-layout {
+ background: $primary_lightblue;
+}
+
+.footer {
+ text-align: center;
+ font-family: $primary_font;
+ font-weight: $primary_font_weight
+}
+
diff --git a/src/js/pages/MainPage.js b/src/js/pages/MainPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ee297db46a90515b612d740b51fc920229d5cad
--- /dev/null
+++ b/src/js/pages/MainPage.js
@@ -0,0 +1,44 @@
+import {Layout} from "antd";
+import "./MainPage,module.scss";
+import Link from "../components/Link/Link";
+import LandingSection from "../sections/LandingSection/LandingSection";
+import VscodeSection from "../sections/VscodeSection/VscodeSection";
+
+
+import TopLinks from "../components/TopLinks/TopLInks";
+import CloudSection from "../sections/CloudSection/CloudSection";
+import StatsSection from "../sections/StatsSection/StatsSection";
+import FeatureSection from "../sections/FeatureSection/FeatureSection";
+import TowerSection from "../sections/TowerSection/TowerSection";
+import OctopusSection from "../sections/OctopusSection/OctopusSection";
+import BottomSection from "../sections/BottomSection/BottomSection";
+
+const {Header, Content, Footer} = Layout;
+
+
+const MainPage = () => {
+ return (
+ <Layout>
+ <Header className={"top-bar"}>
+ <TopLinks/>
+ </Header>
+ <Content className="site-layout">
+ <LandingSection/>
+ <VscodeSection/>
+ <CloudSection/>
+ <StatsSection/>
+ <FeatureSection/>
+ <TowerSection/>
+ <OctopusSection/>
+ <BottomSection/>
+ </Content>
+ <Footer className="footer">
+ <Link>Contact</Link>
+ <Link>Démo</Link>
+ <Link>Fait avec amour par Takima {"<3"}</Link>
+ </Footer>
+ </Layout>
+ );
+}
+
+export default MainPage;
\ No newline at end of file
diff --git a/src/js/sections/BottomSection/BottomSection.js b/src/js/sections/BottomSection/BottomSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2bf7efb2c8bc5ed38b76b8b19f39ea7c025377a
--- /dev/null
+++ b/src/js/sections/BottomSection/BottomSection.js
@@ -0,0 +1,54 @@
+import styles from "./BottomSection.module.scss";
+import Button from "../../components/Button/Button";
+
+import logoInsa from "../../../assets/props/insa_logo.png";
+import logoEpf from "../../../assets/props/epf_logo.png"
+
+
+
+const BottomSection = () => {
+ return (
+ <div className={styles.BottomSection}>
+ <div className={styles.MiddleBlock}>
+ <p className={styles.Title}>
+ On en parle à l'INSA de Rouen avec Takima
+ </p>
+ <div className={styles.Caption}>
+ <div className={styles.Comments}>
+ <p className={styles.FirstComment}>
+ Comment garder la proximité des TPs sur site lorsque vos étudiants sont confinés.
+ </p>
+ <p className={styles.SecondComment}>
+ Retour d'expérience sur l'outillage et notamment Deadlock pour des séances de tp@home en période de confinement.
+ </p>
+ </div>
+ <div className={styles.ButtonContainer}>
+ <Button>Acceder à l'article</Button>
+ </div>
+ </div>
+
+ <div className={styles.BottomBlock}>
+ <div className={styles.Logos}>
+ <img src={logoInsa} alt={"insa logo"}/>
+ <img src={logoEpf} alt={"epf logo"}/>
+ <p>
+ Ils ont déjà expérimenté notre plateforme.
+ </p>
+ </div>
+ <div className={styles.ContactLinks}>
+ <p className={styles.BigCaption}>
+ Offrez à vos étudiants les meilleurs outils pour apprendre.
+ </p>
+ <Button>Contactez-nous</Button>
+ <p className={styles.SmallCaption}>
+ Pour être les prochains !
+ </p>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default BottomSection;
\ No newline at end of file
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a1927f24f08c50069e015ca2d531e93ce984602
--- /dev/null
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -0,0 +1,141 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.BottomSection {
+ background-image: url('#{$assetPath}/curves/courbe_4.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
+ background-repeat: no-repeat;
+ background-position: bottom, 105% 40%, -5% 55%;
+ background-size: 100% 50%, 35% 35%, 40% 40%;
+ min-height: 180vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: $primary_font;
+ font-weight: $primary_font_weight;
+ padding-top: 10%;
+ position: relative;
+
+ .MiddleBlock {
+ padding: 2% 2%;
+ background: $primary_beige;
+ color: $primary_black;
+ border-radius: 10px;
+ min-height: 30%;
+ max-width: 50vw;
+
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+
+
+ .Title {
+ font-size: 3em;
+ text-align: center;
+ }
+
+ .Caption {
+ padding: 0 2% 0 0;
+ display: flex;
+ flex-direction: row;
+
+
+ .Comments {
+ display: inline-block;
+
+
+ .FirstComment {
+ font-size: 1.5em;
+ max-width: 70%;
+ }
+
+ .SecondComment {
+ font-size: 1em;
+ max-width: 70%;
+ }
+
+ }
+
+ .ButtonContainer {
+ flex-basis: 35%;
+ min-width: 30%;
+ position: center;
+ padding-top: 5%;
+ padding-right: 10%;
+
+
+ Button {
+ font-family: $primary_font;
+ font-weight: $primary_font_weight;
+
+ width: 100%;
+ height: 50%;
+
+ }
+
+ }
+
+
+ }
+
+ }
+
+ .BottomBlock {
+
+ position: absolute;
+ bottom: 10%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .Logos {
+ max-width: 40%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ img {
+ margin-bottom: 2%;
+ width: 50%;
+ height: 40%;
+ background: white;
+ }
+
+ p {
+ text-align: center;
+ color: white;
+ font-size: 1em;
+ }
+ }
+
+ .ContactLinks {
+ max-width: 20%;
+ align-items: center;
+
+
+ display: flex;
+ flex-direction: column;
+
+ .BigCaption {
+ text-align: left;
+ color: white;
+ font-size: 1.5em;
+ }
+
+ Button {
+ align-items: center;
+ margin-bottom: 5%;
+ font-family: $primary_font;
+ font-weight: $primary_font_weight;
+ width: 90%;
+
+ }
+
+ .SmallCaption {
+ color: white;
+ font-size: 1em;
+ }
+ }
+ }
+
+}
diff --git a/src/js/sections/CloudSection/CloudSection.js b/src/js/sections/CloudSection/CloudSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..c00bb96797c4d8ae1a881f292fa109f1294997d9
--- /dev/null
+++ b/src/js/sections/CloudSection/CloudSection.js
@@ -0,0 +1,41 @@
+import styles from "./CloudSection.module.scss";
+import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
+
+import cloud from "../../../assets/main/nuage_icones.png";
+
+
+
+const black = "#1D2C38";
+const white = "white";
+const blue = "#6FACC6";
+
+const upperBlockContent = [
+ {text: "Le langage n'a pas d'importance, ", color: blue},
+ {text: "l'algorithme est votre maître-mot ?", color: black}
+];
+
+const bottomBlockTitle = [
+ {text: "Nous possédons ", color: white},
+ {text: "des exercices multi-langages.", color: black}
+];
+
+
+const CloudSection = () => {
+ return (
+ <div className={styles.CloudSection}>
+ <div className={styles.UpperBlock}>
+ <MultiColoredText content={upperBlockContent} />
+
+ </div>
+ <img src={cloud} alt="technologies cloud" className={styles.Cloud}/>
+ <div className={styles.BottomBlock}>
+ <MultiColoredText content={bottomBlockTitle} />
+ <p className={styles.Caption}>
+ Vous pouvez en ajouter autant que vous le souhaitez !
+ </p>
+ </div>
+ </div>
+ );
+}
+
+export default CloudSection;
\ No newline at end of file
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e5a39201e1e7ca4e2cd7a0eeede322893f90f525
--- /dev/null
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -0,0 +1,39 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.CloudSection {
+ background-image: url('#{$assetPath}/curves/courbe_2.png');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+ min-height: 100vh;
+ vertical-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: $primary_font;
+ font-weight: $primary_font_weight;
+
+ .UpperBlock {
+ padding-top: 5%;
+ font-size: 2.5em;
+
+ }
+
+ .Cloud {
+ padding-top: 5%;
+ max-width: 50vw;
+ max-height: 60vh;
+ }
+
+ .BottomBlock {
+ padding-top: 5%;
+ font-size: 2rem;
+
+ .Caption {
+ padding-top: 10px;
+ font-size: 1.5rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/js/sections/FeatureSection/FeatureSection.js b/src/js/sections/FeatureSection/FeatureSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1238acf20d0d4747e5314407fbd258eb4c01dc2
--- /dev/null
+++ b/src/js/sections/FeatureSection/FeatureSection.js
@@ -0,0 +1,57 @@
+import styles from "./FeatureSection.module.scss";
+import {Col, Row} from "antd";
+import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
+import {CheckOutlined} from "@ant-design/icons";
+
+const pink = "#CB2F73";
+const black = "#1D2C38";
+
+const feature1 = [
+ {text: "Créer facilement ", color: pink},
+ {text: "des parcours d'exercice pour faire ses évaluations sur la palteforme.", color: black}
+];
+
+const feature2 = [
+ {text: "Créer des TP ", color: pink},
+ {text: "sur la plateforme sans devoir configurer plein de machines.", color: black}
+];
+
+const FeatureSection = () => {
+ return(
+ <div className={styles.FeatureSection}>
+ <Row>
+ <Col span={12}>
+ <div className={styles.LeftSide}>
+ <div className={styles.Feature}>
+ <CheckOutlined className={styles.Checkmark}/>
+ <MultiColoredText content={feature1}/>
+ </div>
+ <div className={styles.Feature}>
+ <CheckOutlined className={styles.Checkmark}/>
+ <MultiColoredText content={feature2}/>
+ </div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className={styles.RightSide}>
+ <div className={styles.Bubble}>
+ <p>
+ "L'un des points forts de Deadlock, sur le volet rapprochement de l'enseignant et de l'étudiant en situation distante, tient notamment à la frise temporelle."
+ </p>
+ <p>
+ "Les fonctionnalités fournies par Deadlock (catalogue d'exercices, environnement prêt à l'emploi en mode web, inscription en SSO, frise temporelle) ont permis de réduire la distance."
+ </p>
+ </div>
+ <div className={styles.Author}>
+ Frédéric BAUCHER, <br/>
+ Professeur Associé, INSA-ROUEN
+ </div>
+
+ </div>
+ </Col>
+ </Row>
+ </div>
+ );
+};
+
+export default FeatureSection;
\ No newline at end of file
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7986b1871e49e5b15be958070782bf7cf2dc487d
--- /dev/null
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -0,0 +1,71 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.FeatureSection {
+ background: white;
+ background-size: 100% 100%;
+ position: relative;
+ min-height: 60vh;
+
+ .LeftSide {
+ padding-top: 5%;
+ padding-left: 30%;
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ display: flex;
+ flex-direction: column;
+
+ .Feature {
+ display : flex;
+ flex-direction: row;
+ padding: 10% 5% 5% 5%;
+ font-size: 2em;
+ line-height: 2.5rem;
+
+ .Checkmark {
+ padding-right: 5%;
+ font-size: 4rem;
+ }
+ }
+ }
+
+ .RightSide {
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ color: $primary_black;
+ padding-top: 10%;
+
+ // taken from
+ // https://codingislove.com/css-speech-bubbles/
+
+ .Bubble {
+
+ width: 70%;
+ margin: 50px auto;
+ position:relative;
+ border: solid $primary_black;
+ padding: 5px 5px;
+
+ &:before {
+ content: "";
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ border-right: 10px solid $primary_black;
+ border-left: 10px solid transparent;
+ border-top: 10px solid $primary_black;
+ border-bottom: 10px solid transparent;
+ bottom: -20px;
+ left: 50px;
+ }
+
+ }
+
+ .Author {
+ position: relative;
+ padding-left: 25%;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/js/sections/LandingSection/LandingSection.js b/src/js/sections/LandingSection/LandingSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..8a5cfb4f526635b447f980d130bbd30a90fd29a5
--- /dev/null
+++ b/src/js/sections/LandingSection/LandingSection.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import styles from "./LandingSection.module.scss";
+import {Col, Row} from "antd";
+import octopus from '../../../assets/props/pieuvre.svg'
+import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
+
+// TODO export variables from colors.scss
+const landingPageMessage = [
+ {text: "Votre outil pour ", color: "#1D2C38"},
+ {text: "enseigner l'informatique", color: "#CB2F73"}
+];
+
+
+const LandingSection = () => {
+ return (
+ <div className={styles.LandingSection}>
+ <Row>
+ <Col span={12}>
+ <div className={styles.LeftSide}>
+ <img src={octopus} alt={"octopus"} className={styles.Octopus}/>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className={styles.RightSide}>
+ <p className={styles.Title}>DEADLOCK <br/>
+ <span className={styles.Caption}><MultiColoredText content={landingPageMessage}/></span></p>
+ </div>
+ </Col>
+ </Row>
+ </div>
+ );
+}
+
+export default LandingSection;
\ No newline at end of file
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..30e962e28fcc7da9120f413bf1fc4037fd7d967a
--- /dev/null
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -0,0 +1,41 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.LandingSection {
+ background-image: url('#{$assetPath}/curves/courbe_1.png');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+ min-height: 100vh;
+
+ .LeftSide {
+ padding-top: 20%;
+ padding-left: 40%;
+
+ .Octopus {
+ max-width: 45vw;
+ max-height: 45vh;
+ }
+ }
+
+ .RightSide {
+ color: $primary_black;
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ padding-top: 30%;
+ padding-right: 30%;
+ text-align: center;
+ vertical-align: middle;
+
+ .Title {
+ font-size: 7rem;
+
+ .Caption {
+ font-size: 2rem;
+ }
+
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/js/sections/OctopusSection/OctopusSection.js b/src/js/sections/OctopusSection/OctopusSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..4cf8a9c1a81b13ca704debdefddc4c23aa7671e5
--- /dev/null
+++ b/src/js/sections/OctopusSection/OctopusSection.js
@@ -0,0 +1,14 @@
+import styles from "./OctopusSection.module.scss";
+
+import octopusImage from "../../../assets/main/poulpe_ludique_big.png";
+
+
+const OctopusSection = () => {
+ return (
+ <div className={styles.OctopusSection}>
+ <img src={octopusImage} alt="octopus" className={styles.OctopusImage}/>
+ </div>
+ );
+}
+
+export default OctopusSection;
\ No newline at end of file
diff --git a/src/js/sections/OctopusSection/OctopusSection.module.scss b/src/js/sections/OctopusSection/OctopusSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b3375a9c0a7c6b2275ad7e47afa8599b58c79c05
--- /dev/null
+++ b/src/js/sections/OctopusSection/OctopusSection.module.scss
@@ -0,0 +1,16 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.OctopusSection {
+ background-image: url('#{$assetPath}/curves/courbe_3.png');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+ min-height: 100vh;
+
+ .OctopusImage {
+ max-width: 100%;
+ max-height: 90%;
+ }
+}
diff --git a/src/js/sections/StatsSection/StatsSection.js b/src/js/sections/StatsSection/StatsSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..ced055621d2195e3c7bd1a796f7fa574d186877b
--- /dev/null
+++ b/src/js/sections/StatsSection/StatsSection.js
@@ -0,0 +1,39 @@
+import styles from "./StatsSection.module.scss";
+import {Col, Row} from "antd";
+import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
+
+import statsImage from "../../../assets/main/notes.png";
+
+const black = "#1D2C38";
+const white = "white";
+
+const title = [
+ {text: "Comment suivre ", color: white},
+ {text: "vos étudiants ? ", color: black},
+];
+
+const StatsSection = () => {
+ return (
+ <div className={styles.StatsSection}>
+ <Row>
+ <Col span={12}>
+ <div className={styles.LeftSide}>
+ <p className={styles.Title}>
+ <MultiColoredText content={title}/>
+ </p>
+ <p className={styles.Caption}>
+ Vous pouvez relire le code de vos étudiants, les évaluer, leur faire des retours
+ </p>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className={styles.RightSide}>
+ <img src={statsImage} alt={"notes screen"} className={styles.NotesImage}/>
+ </div>
+ </Col>
+ </Row>
+ </div>
+ );
+}
+
+export default StatsSection;
\ No newline at end of file
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9a6ef58e158fec534cf9471f005499244e00a05a
--- /dev/null
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -0,0 +1,48 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.StatsSection {
+ background-color: $primary_lightblue;
+ background-image: url('#{$assetPath}/props/personnage.professeur.svg');
+ background-position: 15% 100%;
+ background-size: 25% 25%;
+ background-repeat: no-repeat;
+ position: relative;
+ min-height: 80vh;
+
+ .LeftSide {
+
+ color: $primary_black;
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ padding-top: 25%;
+ padding-left: 10%;
+ vertical-align: middle;
+ line-height: 4em;
+
+ .Title {
+
+ font-size: 3rem;
+
+ }
+
+ .Caption {
+ font-size: 1.5em;
+ line-height: 1em;
+ color: white;
+ }
+
+ }
+
+ .RightSide {
+
+
+ .NotesImage {
+ padding-top: 20%;
+ max-width: 50vw;
+ max-height: 50vh;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/js/sections/TowerSection/TowerSection.js b/src/js/sections/TowerSection/TowerSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..a437312c52dc537ec1d7e1b08d22af5985b86e06
--- /dev/null
+++ b/src/js/sections/TowerSection/TowerSection.js
@@ -0,0 +1,40 @@
+import styles from "./TowerSection.module.scss";
+import {Col, Row} from "antd";
+import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
+
+import towerImage from "../../../assets/props/donjon.svg";
+
+const black = "#1D2C38";
+const white = "white";
+
+const title = [
+ {text: "Nous pensons que ", color: white},
+ {text: "apprendre de manière ludique ", color: black},
+ {text: "favorise l'investissement des étudiants.", color: white}
+];
+
+const TowerSection = () => {
+ return (
+ <div className={styles.TowerSection}>
+ <Row>
+ <Col span={12}>
+ <div className={styles.LeftSide}>
+ <img src={towerImage} alt={"tower"} className={styles.TowerImage}/>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className={styles.RightSide}>
+ <p className={styles.Title}>
+ <MultiColoredText content={title}/>
+ </p>
+ <p className={styles.Caption}>
+ C'est pourquoi nous avons ajouté plusieurs éléments de jeux au sein de notre palteforme.
+ </p>
+ </div>
+ </Col>
+ </Row>
+ </div>
+ );
+}
+
+export default TowerSection;
\ No newline at end of file
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..88c3b451b6cafcc998b809bb2a9ee269f3f33cd2
--- /dev/null
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -0,0 +1,42 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.TowerSection {
+ background: $primary_lightblue;
+ background-size: 100% 100%;
+ position: relative;
+ min-height: 70vh;
+
+ .LeftSide {
+ padding-top: 10%;
+ padding-left: 50%;
+
+ .TowerImage {
+ max-width: 40vw;
+ max-height: 45vh;
+ }
+ }
+
+ .RightSide {
+ color: $primary_black;
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ padding-top: 15%;
+ padding-right: 30%;
+ vertical-align: middle;
+ line-height: 4em;
+
+ .Title {
+
+ font-size: 3rem;
+
+ }
+ .Caption {
+ font-size: 1.5em;
+ line-height: 1em;
+ color: white;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/js/sections/VscodeSection/VscodeSection.js b/src/js/sections/VscodeSection/VscodeSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3f711ccbf70cd743bcb147bbcea4008b49c43a7
--- /dev/null
+++ b/src/js/sections/VscodeSection/VscodeSection.js
@@ -0,0 +1,40 @@
+import styles from "./VscodeSection.module.scss";
+import {Col, Row} from "antd";
+import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
+
+import vscodeImage from "../../../assets/main/vscode_screen.png";
+
+const black = "#1D2C38";
+const white = "white";
+
+const vscodeTitle = [
+ {text: "Un ", color: white},
+ {text: "IDE complet ", color: black},
+ {text: "pour chacun de vos étudiants", color: white}
+];
+
+const VscodeSection = () => {
+ return (
+ <div className={styles.VscodeSection}>
+ <Row>
+ <Col span={16}>
+ <div className={styles.LeftSide}>
+ <img src={vscodeImage} alt={"vscodeScreen"} className={styles.VscodeImage}/>
+ </div>
+ </Col>
+ <Col span={8}>
+ <div className={styles.RightSide}>
+ <p className={styles.Title}>
+ <MultiColoredText content={vscodeTitle}/>
+ </p>
+ <p className={styles.Caption}>
+ Plus besoin de se soucier de l'environnement, de la machine, un navigateur connecté suffit.
+ </p>
+ </div>
+ </Col>
+ </Row>
+ </div>
+ );
+}
+
+export default VscodeSection;
\ No newline at end of file
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4c2f9bc5c4ef654e6b8ecb399182a46565d42c40
--- /dev/null
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -0,0 +1,43 @@
+@import "../../../utils";
+@import "../../../style/fonts";
+@import "../../../style/colors";
+
+.VscodeSection {
+ background: $primary_lightblue;
+ background-size: 100% 100%;
+ position: relative;
+ min-height: 85vh;
+
+ .LeftSide {
+ padding-top: 15%;
+ padding-left: 30%;
+
+ .VscodeImage {
+ max-width: 40vw;
+ max-height: 45vh;
+ }
+ }
+
+ .RightSide {
+ color: $primary_black;
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ padding-top: 35%;
+ padding-right: 30%;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 4em;
+
+ .Title {
+
+ font-size: 3rem;
+
+ }
+ .Caption {
+ font-size: 1.5em;
+ line-height: 1em;
+ color: white;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/style/colors.scss b/src/style/colors.scss
index c9ad617e0ce94d6d5cee377446b6df919222906f..b59dc69e59cba04cbdc97580a82538af13e7a2ce 100644
--- a/src/style/colors.scss
+++ b/src/style/colors.scss
@@ -2,4 +2,9 @@ $primary_black: #1D2C38;
$primary_pink: #CB2F73;
$primary_lightblue: #6FACC6;
$primary_beige: #FDE7D3;
-$primary_very_lightblue: #B1DEF2;
\ No newline at end of file
+$primary_very_lightblue: #B1DEF2;
+
+:export {
+ primaryBlack: $primary_black;
+ primaryPink: $primary_pink;
+}
\ No newline at end of file
diff --git a/src/style/fonts.scss b/src/style/fonts.scss
index af643f2c72e511849979e9069655e7c8ad7c9293..520dd6b6533dfd348714d0da33330021340cf3f7 100644
--- a/src/style/fonts.scss
+++ b/src/style/fonts.scss
@@ -1 +1,2 @@
-$primary_font: Hiragino Kaku Gothic StdN;
\ No newline at end of file
+$primary_font: Hiragino Kaku Gothic StdN 800;
+$primary_font_weight: 800;
\ No newline at end of file
diff --git a/src/utils.scss b/src/utils.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d2ed4007e9a8ee217463faf383099e91987e4b2d
--- /dev/null
+++ b/src/utils.scss
@@ -0,0 +1 @@
+$assetPath : "/assets";
\ No newline at end of file