From 7f961b73ce52376d539656769bf4afd5a72d363c Mon Sep 17 00:00:00 2001
From: Mehdi Messaadi <mehdimessaadi14@gmail.com>
Date: Sun, 21 Jul 2024 21:15:17 +0100
Subject: [PATCH] [#523]: fixed footer menu not appearing on mobile version

---
 frontend/src/pages/landing/Footer.jsx   |  10 +-
 frontend/src/pages/landing/landing.scss | 339 +++++++++++++-----------
 2 files changed, 183 insertions(+), 166 deletions(-)

diff --git a/frontend/src/pages/landing/Footer.jsx b/frontend/src/pages/landing/Footer.jsx
index 02897db4..5939f8a1 100644
--- a/frontend/src/pages/landing/Footer.jsx
+++ b/frontend/src/pages/landing/Footer.jsx
@@ -153,8 +153,8 @@ function Footer() {
             </Nav>
           </Col>
         </Row>
-        <Row className="d-flex mx-5 mb-5 align-items-center d-none d-lg-flex">
-          <Col>
+        <Row className="d-flex mb-5 align-items-center d-lg-flex">
+          <Col className="footer-menu">
             <div className="mb-2">
               <p className="mb-0">
                 <NavbarBrand href={tF('tel1Href')}>
@@ -172,7 +172,7 @@ function Footer() {
               <p className="m-0">{tF('moscow')}</p>
             </div>
           </Col>
-          <Col>
+          <Col className="footer-menu">
             <Nav as="ul" className="list-group flex-column">
               <li className="mb-2">
                 <NavbarBrand className="p-0" href="#aboutProject">
@@ -196,7 +196,7 @@ function Footer() {
               </li>
             </Nav>
           </Col>
-          <Col>
+          <Col className="footer-menu">
             <Nav as="ul" className="list-group flex-column">
               <li className="mb-2">
                 <NavbarBrand
@@ -236,7 +236,7 @@ function Footer() {
               </li>
             </Nav>
           </Col>
-          <Col>
+          <Col className="footer-menu">
             <div className="ms-auto">
               <p>{tF('name')}</p>
               <p className="m-0">{tF('city')}</p>
diff --git a/frontend/src/pages/landing/landing.scss b/frontend/src/pages/landing/landing.scss
index ca4647fe..76854299 100644
--- a/frontend/src/pages/landing/landing.scss
+++ b/frontend/src/pages/landing/landing.scss
@@ -1,185 +1,202 @@
-$font-family: 'Nunito Sans';
+$font-family: "Nunito Sans";
 
-:root{
-    @font-face {
-        font-family: $font-family;
-        src: local("Nunito Sans"), url("./assets/fonts/NunitoSans_10pt-Light.ttf") format("truetype");
-        font-weight: 300;
-    }
-    @font-face {
-        font-family: $font-family;
-        src: local("Nunito Sans"), url("./assets/fonts/NunitoSans_10pt-SemiBold.ttf") format("truetype");
-        font-weight: 600;
-    }
-    @font-face {
-        font-family: $font-family;
-        src: local("Nunito Sans"), url("./assets/fonts/NunitoSans_10pt-Bold.ttf") format("truetype");
-        font-weight: 700;
-    }
+:root {
+  @font-face {
+    font-family: $font-family;
+    src:
+      local("Nunito Sans"),
+      url("./assets/fonts/NunitoSans_10pt-Light.ttf") format("truetype");
+    font-weight: 300;
+  }
+  @font-face {
+    font-family: $font-family;
+    src:
+      local("Nunito Sans"),
+      url("./assets/fonts/NunitoSans_10pt-SemiBold.ttf") format("truetype");
+    font-weight: 600;
+  }
+  @font-face {
+    font-family: $font-family;
+    src:
+      local("Nunito Sans"),
+      url("./assets/fonts/NunitoSans_10pt-Bold.ttf") format("truetype");
+    font-weight: 700;
+  }
 
-    .btn-signin {
-        --bs-btn-bg: #136EF6;
-        --bs-btn-color: #EBF1F9;
-        --bs-btn-border-color: #136EF6;
-        --hover-background: #136EF6;
-        --hover-border: #136EF6;
-        --hover-color: #EBF1F9;
-        --bs-btn-hover-color: #EBF1F9;
-        --bs-btn-hover-bg: #136EF6;
-        --bs-btn-hover-border-color: #136EF6;
-        --bs-btn-focus-shadow-rgb: #136EF6;
-        &:hover, :focus {
-            font-weight: 600;
-        }
-    }
-    .btn-start {
-        width: 20.625rem;
-        &:hover,
-        :focus {
-          font-weight: 600;
-        }
+  .btn-signin {
+    --bs-btn-bg: #136ef6;
+    --bs-btn-color: #ebf1f9;
+    --bs-btn-border-color: #136ef6;
+    --hover-background: #136ef6;
+    --hover-border: #136ef6;
+    --hover-color: #ebf1f9;
+    --bs-btn-hover-color: #ebf1f9;
+    --bs-btn-hover-bg: #136ef6;
+    --bs-btn-hover-border-color: #136ef6;
+    --bs-btn-focus-shadow-rgb: #136ef6;
+    &:hover,
+    :focus {
+      font-weight: 600;
     }
-    .btn-start-no-reg {
-      width: 20.625rem;
+  }
+  .btn-start {
+    width: 20.625rem;
+    &:hover,
+    :focus {
+      font-weight: 600;
     }
+  }
+  .btn-start-no-reg {
+    width: 20.625rem;
+  }
 }
 .first-bg-image {
-    font-family: $font-family;
+  font-family: $font-family;
 }
 .header-link:hover,
 .header-link:focus {
-    border-bottom: 1px solid var(--Aent, #136EF6);
+  border-bottom: 1px solid var(--Aent, #136ef6);
 }
 .wrapper-for-bg-images {
-    overflow: hidden;
+  overflow: hidden;
 }
-  
+
+.footer-menu {
+  margin-block-end: 2rem;
+  align-self: flex-start;
+  text-align: center;
+
+  @media (min-width: 768px) {
+    text-align: initial;
+    align-self: auto;
+    margin-block-end: initial;
+  }
+}
+
 @media (min-width: 992px) {
-    .navbar-logo {
-        width: 150px;
-    }
-    .about-project > .d-lg-flex > h4 {
-        font-family: $font-family;
-        font-weight: 300;
-        line-height: 130%;
-        text-transform: uppercase;
-    }
-    .about-project > .d-lg-flex > h1 {
-        font-family: $font-family;
-        font-weight: 700;
-        font-size: 6rem;
-        line-height: 130%;
-        text-transform: uppercase;
-    }
-    .about-project > .d-lg-flex > div > h2 {
-        font-family: $font-family;
-        font-weight: 600;
-        font-size: 2.5rem;
-        line-height: 130%;
-    }
-    .first-bg-image{
-        position: relative;
-        overflow: visible;
-        &::before {
-            position: absolute;
-            top: -5%;
-            right: -40%;
-            width: 130rem;
-            height: 83rem;
-            content: "";
-            background-image: url("./assets/BGElement.svg");
-            background-repeat: no-repeat;
-            background-position: top;
-            background-size: 100% 100%;
-            z-index: -1;
-        }
-    }
-    .background-dark{
-        color: white;
+  .navbar-logo {
+    width: 150px;
+  }
+  .about-project > .d-lg-flex > h4 {
+    font-family: $font-family;
+    font-weight: 300;
+    line-height: 130%;
+    text-transform: uppercase;
+  }
+  .about-project > .d-lg-flex > h1 {
+    font-family: $font-family;
+    font-weight: 700;
+    font-size: 6rem;
+    line-height: 130%;
+    text-transform: uppercase;
+  }
+  .about-project > .d-lg-flex > div > h2 {
+    font-family: $font-family;
+    font-weight: 600;
+    font-size: 2.5rem;
+    line-height: 130%;
+  }
+  .first-bg-image {
+    position: relative;
+    overflow: visible;
+    &::before {
+      position: absolute;
+      top: -5%;
+      right: -40%;
+      width: 130rem;
+      height: 83rem;
+      content: "";
+      background-image: url("./assets/BGElement.svg");
+      background-repeat: no-repeat;
+      background-position: top;
+      background-size: 100% 100%;
+      z-index: -1;
     }
-    .background-dark::before {
-        content: "";
-        position: absolute;
-        left: 0px;
-        width: 100%;
-        height: 11rem;
-        background-color: #050914;
-        z-index: -1;
-    }  
+  }
+  .background-dark {
+    color: white;
+  }
+  .background-dark::before {
+    content: "";
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    height: 11rem;
+    background-color: #050914;
+    z-index: -1;
+  }
 }
 
 @media (max-width: 992px) {
-    .title-wrapper {
-        column-gap: 0.85rem;
-    }
-    .about-project > .d-lg-none > .d-flex > h1 {
-        font-family: $font-family;
-        font-weight: 700;
-        font-size: 2.8rem;
-        line-height: 130%;
-        text-transform: uppercase;
-    }
-    .about-project > .d-lg-none > .d-flex > h1.m-0 {
-        font-family: $font-family;
-        font-weight: 700;
-        font-size: 4rem;
-        line-height: 130%;
-        text-transform: uppercase;
-    }
-    .about-project > .d-lg-none > div > h2 {
-        font-family: $font-family;
-        font-weight: 500;
-        line-height: 130%;
+  .title-wrapper {
+    column-gap: 0.85rem;
+  }
+  .about-project > .d-lg-none > .d-flex > h1 {
+    font-family: $font-family;
+    font-weight: 700;
+    font-size: 2.8rem;
+    line-height: 130%;
+    text-transform: uppercase;
+  }
+  .about-project > .d-lg-none > .d-flex > h1.m-0 {
+    font-family: $font-family;
+    font-weight: 700;
+    font-size: 4rem;
+    line-height: 130%;
+    text-transform: uppercase;
+  }
+  .about-project > .d-lg-none > div > h2 {
+    font-family: $font-family;
+    font-weight: 500;
+    line-height: 130%;
+  }
+  .first-bg-image {
+    position: relative;
+    &::before {
+      position: absolute;
+      top: 2%;
+      right: 0;
+      width: 64rem;
+      height: 65rem;
+      content: "";
+      background-image: url("./assets/BGElement.svg");
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: top;
+      // background-size: 100% 100%;
+      z-index: -1;
     }
-    .first-bg-image{
-        position: relative;
-        &::before {
-            position: absolute;
-            top: 2%;
-            right: 0;
-            width: 64rem;
-            height: 65rem;
-            content: "";
-            background-image: url("./assets/BGElement.svg");
-            background-repeat: no-repeat;
-            background-size: cover;
-            background-position: top;
-            // background-size: 100% 100%;
-            z-index: -1;
-        }
+  }
+  .possibilities-background {
+    position: relative;
+    &::before {
+      position: absolute;
+      width: 76rem;
+      height: 6rem;
+      left: -26rem;
+      top: -0.7rem;
+      content: "";
+      background-image: url("./assets/SmallBGElement.svg");
+      background-repeat: no-repeat;
+      background-position: top;
+      background-size: 100% 100%;
+      z-index: -1;
     }
-    .possibilities-background {
-        position: relative;
-        &::before {
-            position: absolute;
-            width: 76rem;
-            height: 6rem;
-            left: -26rem;
-            top: -0.7rem;
-            content: "";
-            background-image: url("./assets/SmallBGElement.svg");
-            background-repeat: no-repeat;
-            background-position: top;
-            background-size: 100% 100%;
-            z-index: -1;
-        }
-    }  
-@media (max-width: 991px) {
+  }
+  @media (max-width: 991px) {
     .background-dark {
-        color: black;
+      color: black;
     }
   }
 }
 @media (max-width: 992px) and (orientation: landscape) {
-    
-    .about-project > .d-lg-none > .d-flex > h1 {
-        display: inline-block;
-        width: auto;
-      }
-      
-    .about-project > .d-lg-none > .d-flex > p {
-      display: block;
-      width: 100%;
-    
-    }
-  }
\ No newline at end of file
+  .about-project > .d-lg-none > .d-flex > h1 {
+    display: inline-block;
+    width: auto;
+  }
+
+  .about-project > .d-lg-none > .d-flex > p {
+    display: block;
+    width: 100%;
+  }
+}