bitlogic · marino-martin · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022
diff --git a/src/components/Footer/ContactData/contactData.js b/src/components/Footer/ContactData/contactData.js
@@ -1,32 +1,41 @@
-import React from "react";
-import { useFooter } from '../../../hooks';
+import { Link } from "gatsby"
+import React from "react"
+import { useFooter } from "../../../hooks"
 import FaIcon from "../../FaIcon/FaIcon"
-import "./contactData.scss";
+import "./contactData.scss"
 
 export default function ContactData() {
-  const data = useFooter();
-  const dataFooter = data?.allStrapiLayout?.nodes[0]?.footer;
+  const data = useFooter()
+  const dataFooter = data?.allStrapiLayout?.nodes[0]?.footer
+  const dataNav = data?.allStrapiLayout?.nodes[0].navbar?.navButton
 
-  const contact = dataFooter?.contact?.iconText.map((item) => {
+  const contact = dataFooter?.contact?.iconText.map(item => {
     return (
       <p className="icon-text d-flex">
         <FaIcon type={item.icon.type} code={item.icon.code} />
         {item.name}
       </p>
     )
-  });
+  })
 
   return (
     <>
-      <div className='ContactData__Item'>
+      <div className="ContactData__Item">
         <h6>{dataFooter?.contact?.title}</h6>
-        <p className='ContactData__Item__contact'>{contact}</p>
+        <p className="ContactData__Item__contact">{contact}</p>
 
-        <div className='ContactData__Item__link'>
-          <a href={dataFooter.internalLink?.pathTo}>{dataFooter.internalLink?.name}</a>
+        <div className="ContactData__Item__link">
+          <Link
+            to={
+              dataNav.landing_page
+                ? "/" + dataNav.landing_page.slug
+                : ""
+            }
+          >
+            {dataFooter.internalLink?.name}
+          </Link>
         </div>
       </div>
     </>
-
   )
-}
+}
diff --git a/src/components/Footer/ContactData/contactData.scss b/src/components/Footer/ContactData/contactData.scss
@@ -19,11 +19,13 @@
       font-weight: 600;
       text-decoration: underline;
       font-size: 18px;
+      color: $secondary;
     }
   }
 }
 @media screen and (min-width: $breakpoint-md) {
   .ContactData__Item {
+
     &__contact {
       display: block;
     }
@@ -50,3 +52,20 @@
     }
   }
 }
+
+@media screen and (min-width: $breakpoint-xl) {
+  .ContactData__Item {
+    .icon-text {
+      font-size: 18px;
+      svg {
+        margin-right: 10px;
+      }
+    }
+    &__link {
+      a {
+        font-size: 20px;
+      }
+    }
+  }
+
+}
diff --git a/src/components/Footer/Navegation/navegation.js b/src/components/Footer/Navegation/navegation.js
@@ -1,26 +1,24 @@
-import React from 'react';
-import { useFooter } from '../../../hooks';
-import { Link } from 'gatsby';
-import './navegation.scss';
+import React from "react"
+import { useFooter } from "../../../hooks"
+import { Link } from "gatsby"
+import "./navegation.scss"
 
 export default function Navegation() {
-    const data = useFooter();
-    const dataFooter = data?.allStrapiLayout?.nodes[0].footer;
+  const data = useFooter()
+  const dataFooter = data?.allStrapiLayout?.nodes[0].footer
+  const dataNav = data?.allStrapiLayout?.nodes[0].navbar
+  console.log(dataNav)
 
-    const navegationItems = dataFooter?.navegation?.pageLink;
-
-    const navegationParts = navegationItems?.map((section) =>
-        <li className="mb-2">
-            <Link to={section.pathTo}>{section.name}</Link>
-        </li>
-    );
-
-    return (
-        <div className='ContactData__Item ps-md-3'>
-            <h6>{dataFooter.navegation?.title}</h6>
-            <ul className='Navegation__Item'>
-                {navegationParts}
-            </ul>
-        </div>
-    )
+  return (
+    <div className="ContactData__Item ps-md-3">
+      <h6>{dataFooter.navegation?.title}</h6>
+      <ul className="Navegation__Item">
+        {dataNav.navbarItem.map(navItem => (
+          <li className="mb-2">
+            <Link to={"/" + (navItem.landing?.slug || navItem.singleType)}>{navItem.label}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
 }
diff --git a/src/components/Footer/Subscription/subscription.js b/src/components/Footer/Subscription/subscription.js
@@ -1,27 +1,24 @@
-import React from 'react';
-import { useFooter } from '../../../hooks';
-import './subscription.scss';
+import React from "react"
+import { useFooter } from "../../../hooks"
+import "./subscription.scss"
 
 export default function Subscription() {
-    const data = useFooter();
-    const dataSubscription = data?.allStrapiLayout?.nodes[0]?.footer?.subscription;
+  const data = useFooter()
+  const dataSubscription = data?.allStrapiLayout?.nodes[0]?.footer?.subscription
 
-    return (
-        <div className="ContactData__Item">
-            <h6 className="titleSubscription">{dataSubscription?.title}</h6>
-            <form>
-                <div className="ContactData__Form d-flex flex-md-column justify-content-between">
-                    <label>
-                        <input
-                            type="email"
-                            name="email"
-                            placeholder="Enter your mail"
-                            className="col-7"
-                        />
-                    </label>
-                    <button className="col-5" type="submit">Subscribe</button>
-                </div>
-            </form>
+  return (
+    <div className="ContactData__Item contactData-container">
+      <h6 className="titleSubscription">{dataSubscription?.title}</h6>
+      <form>
+        <div className="ContactData__Form d-flex flex-md-column justify-content-between">
+          <button className="col-5" type="submit">
+            Subscribe
+          </button>
         </div>
-    )
+      </form>
+      <button className="col-5 contactData-mobile_button" type="submit">
+        {dataSubscription?.title}
+      </button>
+    </div>
+  )
 }
diff --git a/src/components/Footer/Subscription/subscription.scss b/src/components/Footer/Subscription/subscription.scss
@@ -2,9 +2,7 @@
 
 .ContactData {
   &__Item {
-    .titleSubscription {
-      display: none;
-    }
+
     form {
       margin-bottom: 0px;
     }
@@ -28,6 +26,9 @@
   }
 }
 @media screen and (min-width: $breakpoint-md) {
+  .contactData-mobile_button{
+    display: none;
+  }
   .ContactData {
     &__Item {
       .titleSubscription {
@@ -60,3 +61,30 @@
     }
   }
 }
+
+
+@media screen and (max-width: $breakpoint-md) {
+  .ContactData {
+    &__Form {
+      input {
+        width: 75%;
+      }
+      button:not(.contactData-mobile_button) {
+        width: 70%;
+        display: none;
+      }
+    }
+  }
+  .titleSubscription {
+    display: none;
+  }
+  .contactData-mobile_button{
+    width: 70%;
+    @include primaryBtn;
+    margin-top: 3em;
+  }
+  .contactData-container{
+    display: flex;
+    justify-content: center;
+  }
+}
diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss
@@ -9,10 +9,11 @@
 }
 .NavBar__Logo {
   margin: 16px 28px;
-  width: 79px;
+  width: 120px;
 }
+
 .navbar-toggler .navbar-toggler-icon {
-  background-image: url("https://strapi-s3-bitlogic.s3.sa-east-1.amazonaws.com/burger_menu_3ae79f1b8e.svg") !important;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj48cGF0aCBzdHJva2U9IiMzZjZiZTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik00IDdoMjJNNCAxNWgyMk00IDIzaDIyIi8+PC9zdmc+") !important;
   width: 2rem;
   height: 2rem;
 }

diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
@@ -6,11 +6,12 @@ import AnimatedNavbar from "./AnimatedNavBar/AnimatedNavbar"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 
 import { useNavbar } from "../../hooks/index"
-
+import menusvg from '../../images/menu.svg'
 import { useTheme } from "../../context/themeContext"
 // theme images
 import moon from "../../images/moon-solid.svg"
 import sun from "../../images/sun.svg"
+console.log(menusvg)
 const NavBar = () => {
   const { theme, toggleTheme } = useTheme()
   const navbarData = useNavbar()
@@ -27,7 +28,7 @@ const NavBar = () => {
   return (
     <>
       <Navbar variant="dark" expand="xl" className="NavBar">
-        <Link to="/">
+        <Link to="/" className="NavBar__Logo" >
           <GatsbyImage
             image={theme === "dark" && logoDark ? logoDark : logoLight}
             alt={"bitlogic"}
@@ -56,8 +57,8 @@ const NavBar = () => {
               <button className="NavBar_Side-contact">
                 <Link
                   to={
-                    "/" + navbarButton.landing_page
-                      ? navbarButton.landing_page.slug
+                    navbarButton.landing_page
+                      ? "/" + navbarButton.landing_page.slug
                       : ""
                   }
                 >

diff --git a/src/hooks/useFooter.js b/src/hooks/useFooter.js
@@ -5,6 +5,24 @@ const useFooter = () => {
     {
       allStrapiLayout {
         nodes {
+          navbar {
+            navButton {
+              landing_page {
+                slug
+              }
+              url
+              content
+            }
+            navbarItem {
+              url
+              label
+              singleType
+              landing {
+                slug
+                name
+              }
+            }
+          }
           footer {
             contact {
               title
@@ -41,10 +59,6 @@ const useFooter = () => {
             }
             navegation {
               title
-              pageLink {
-                name
-                pathTo
-              }
             }
             socialMedia {
               socialMedia {

diff --git a/src/images/menu.svg b/src/images/menu.svg