feat: fill links content

src/js/components/Button/Button.js

@@ -5,7 +5,8 @@ const Button = (props) => {
     return (
         <AntButton
             className={styles.TakiButton}
-            type={"primary"}
+            type={props.type ? props.type : "primary"}
+            href={props.link}
             shape={"round"}
             icon={props.icon}
             disabled={props.disabled}

src/js/components/Button/Button.module.scss

@@ -3,6 +3,7 @@
 
 .TakiButton {
     font-family: $primary_font;
+    font-weight: $primary_font_weight;
     background: $primary_pink;
     color: white;
     border-color: $primary_pink;
@@ -10,11 +11,13 @@
     &:hover {
         border-color: white;
         background-color: $primary_pink;
+        color: white;
     }
 
     &:focus {
         background: $primary_pink;
         border-color: $primary_pink;
+        color: white;
     }
 
 }

src/js/pages/MainPage,module.scss

@@ -33,7 +33,7 @@ html {
     min-width: fit-content;
 
     a {
-        padding-right: 5%;
+        margin-left: 5%;
         font-size: 1vw;
         color: $primary_black;
         text-decoration: none;

src/js/pages/MainPage.js

@@ -12,9 +12,13 @@ import React from "react";
 import {useElementOnScreen} from "../utils/utils";
 import TopBar from "../components/TopBar/TopBar";
 import {Content} from "antd/lib/layout/layout";
+
 const {Footer} = Layout;
 
 
+const takimaLink = "https://www.takima.fr/";
+const demoMailLink = "mailto:deadlock@takima.fr?subject=Deadlock%20demande%20de%20d%C3%A9mo&body=Bonjour%2C%0D%0AJe%20souhaiterais%20acc%C3%A9der%20%C3%A0%20une%20d%C3%A9monstration%20de%20Deadlock%2C%0D%0Avous%20pouvez%20me%20contacter%20au%20%3Cnum%C3%A9ro_telephone%3E%20ou%20via%20mail%20%C3%A0%20l'adresse%20suivante%20%3A%20%3Cemail%3E%0D%0A%0D%0ABien%20cordialement%2C";
+
 const MainPage = () => {
 
     // maybe find a cleaner way to instantiate the child references
@@ -84,7 +88,6 @@ const MainPage = () => {
     });
 
 
-
     return (
         <Layout>
             <TopBar sectionStatus={sections}/>
@@ -99,14 +102,13 @@ const MainPage = () => {
                 <BottomSection innerRef={bottomSectionRef} contactRef={contactSectionRef}/>
             </Content>
             <Footer className="footer">
-                <a href={""}>Contact</a>
-                <a href={""}>Démo</a>
-                <a href={""}>Fait avec amour par Takima {"<3"}</a>
+                <a href={demoMailLink}>Contact</a>
+                <a href={demoMailLink}>Démo</a>
+                <a href={takimaLink}>Fait avec amour par Takima {"<3"}</a>
             </Footer>
         </Layout>
     );
 }
 
 
-
 export default MainPage;
\ No newline at end of file

src/js/sections/BottomSection/BottomSection.js

@@ -4,6 +4,8 @@ import Button from "../../components/Button/Button";
 import logoInsa from "../../../assets/props/insa_logo.png";
 import logoEpf from "../../../assets/props/epf_logo.png"
 
+const articleLink = "https://blog.takima.io/deadlock-comment-garder-la-proximite-des-tps-sur-site-lorsque-vos-etudiants-sont-confines/";
+const askForDemoLink = "const demoMailLink = \"mailto:deadlock@takima.fr?subject=Deadlock%20demande%20de%20d%C3%A9mo&body=Bonjour%2C%0D%0AJe%20souhaiterais%20acc%C3%A9der%20%C3%A0%20une%20d%C3%A9monstration%20de%20Deadlock%2C%0D%0Avous%20pouvez%20me%20contacter%20au%20%3Cnum%C3%A9ro_telephone%3E%20ou%20via%20mail%20%C3%A0%20l'adresse%20suivante%20%3A%20%3Cemail%3E%0D%0A%0D%0ABien%20cordialement%2C\";\n";
 
 
 const BottomSection = ({innerRef, contactRef}) => {
@@ -23,7 +25,7 @@ const BottomSection = ({innerRef, contactRef}) => {
                         </p>
                     </div>
                     <div className={styles.ButtonContainer}>
-                        <Button>Acceder à l'article</Button>
+                        <Button type="link" link={articleLink}>Acceder à l'article</Button>
                     </div>
                 </div>
 
@@ -39,7 +41,7 @@ const BottomSection = ({innerRef, contactRef}) => {
                         <p className={styles.BigCaption}>
                             Offrez à vos étudiants les meilleurs outils pour apprendre.
                         </p>
-                        <Button>Contactez-nous</Button>
+                        <Button type={"link"} link={askForDemoLink}>Contactez-nous</Button>
                         <p className={styles.SmallCaption}>
                             Pour être les prochains !
                         </p>

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

@@ -57,9 +57,9 @@
         flex-basis: 20%;
         position: center;
         padding-right: 10%;
+        margin-top: 5%;
 
         Button {
-          margin-top: 20%;
           font-family: $primary_font;
           font-weight: $primary_font_weight;
           font-size: 0.9vw;
@@ -131,6 +131,7 @@
       .SmallCaption {
         color: white;
         font-size: 1vw;
+        margin-top: 5%;
       }
     }
   }
@@ -241,5 +242,14 @@
 @media (max-width: 375px) {
   .BottomSection {
     min-height: 65vh;
+
+    .BottomBlock {
+      .ContactLinks {
+        max-width: 50%;
+        Button {
+        }
+      }
+    }
+
   }
 }