Merge pull request #168 from ita-social-projects/#136-About-Us-Naviga…

…tion #136 about us navigation
ita-social-projects · Sep 1, 2023 · b8ec89b · b8ec89b
2 parents 79b9e3c + b437837
commit b8ec89b
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 78 deletions.
diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterNavigation.jsx b/FrontEnd/src/components/HeaderFooter/footer/top/FooterNavigation.jsx
@@ -1,80 +1,100 @@
 import css from "./FooterNavigation.module.css";
+import { HashLink } from "react-router-hash-link";
 
 const PAGE_NAVIGATION_LINKS = [
-    {
-        id: "pnl0",
-        title: "Головна",
-        link: "#"
-    },
-    {
-        id: "pnl1",
-        title: "Компанії",
-        link: "#"
-    },
-    {
-        id: "pnl2",
-        title: "Стартапи",
-        link: "#"
-    },
-    {
-        id: "pnl3",
-        title: "Про нас",
-        link: "#"
-    }
-]
+  {
+    id: "pnl0",
+    title: "Головна",
+    link: "/",
+  },
+  {
+    id: "pnl1",
+    title: "Компанії",
+    link: "#",
+  },
+  {
+    id: "pnl2",
+    title: "Стартапи",
+    link: "#",
+  },
+  {
+    id: "pnl3",
+    title: "Про нас",
+    link: "/#about-us",
+  },
+];
 const SERVICES_LINKS = [
-    {
-        id: "sl0",
-        title: "Виробники",
-        link: "#"
-    },
-    {
-        id: "sl1",
-        title: "Імпортери",
-        link: "#"
-    },
-    {
-        id: "sl2",
-        title: "Роздрібні мережі",
-        link: "#"
-    },
-    {
-        id: "sl3",
-        title: "HORECA",
-        link: "#"
-    },
-    {
-        id: "sl4",
-        title: "Інші послуги",
-        link: "#"
-    }
-]
-const CONTACTS = ["Контакти", "qwerty@gmail.com", "+38 050 234 23 23", "Львівська Політехніка", "вул. Степана Бандери 12, Львів"]
+  {
+    id: "sl0",
+    title: "Виробники",
+    link: "#",
+  },
+  {
+    id: "sl1",
+    title: "Імпортери",
+    link: "#",
+  },
+  {
+    id: "sl2",
+    title: "Роздрібні мережі",
+    link: "#",
+  },
+  {
+    id: "sl3",
+    title: "HORECA",
+    link: "#",
+  },
+  {
+    id: "sl4",
+    title: "Інші послуги",
+    link: "#",
+  },
+];
+const CONTACTS = [
+  "Контакти",
+  "qwerty@gmail.com",
+  "+38 050 234 23 23",
+  "Львівська Політехніка",
+  "вул. Степана Бандери 12, Львів",
+];
 
 function FooterNavigation() {
-    return (
-        <div className={css["navigation-content"]}>
-            <div className={css["navigation-content-section"]}>
-                {PAGE_NAVIGATION_LINKS.map((element) => (
-                    <a className={css["navigation-content-section__text"]}
-                       key={element.id}
-                       href={element.link}
-                    >{element.title}</a>
-                ))}
-            </div>
-            <div className={css["navigation-content-section"]}>
-                {SERVICES_LINKS.map((element) => (
-                    <a className={css["navigation-content-section-service__text"]}
-                       key={element.id}
-                       href={element.link}
-                    >{element.title}</a>
-                ))}
-            </div>
-            <div className={css["navigation-content-section"]}>
-                {CONTACTS.map((element, index) => (<label key={index} className={css["navigation-content-section-service__text"]}>{element}</label>))}
-            </div>
-        </div>
-    );
-};
+  return (
+    <div className={css["navigation-content"]}>
+      <div className={css["navigation-content-section"]}>
+        {PAGE_NAVIGATION_LINKS.map((element) => (
+          <HashLink
+            key={element.id}
+            className={css["navigation-content-section__text"]}
+            to={element.link}
+          >
+            {element.title}
+          </HashLink>
+        ))}
+      </div>
+      <div className={css["navigation-content-section"]}>
+        {SERVICES_LINKS.map((element) => (
+          <a
+            className={css["navigation-content-section-service__text"]}
+            key={element.id}
+            href={element.link}
+          >
+            {element.title}
+          </a>
+        ))}
+      </div>
+      <div className={css["navigation-content-section"]}>
+        {CONTACTS.map((element, index) => (
+          <label
+            key={index}
+            className={css["navigation-content-section-service__text"]}
+          >
+            {element}
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
 
 export default FooterNavigation;
diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/Menu.jsx b/FrontEnd/src/components/HeaderFooter/header/navbar/Menu.jsx
@@ -1,5 +1,5 @@
 import css from "./Menu.module.css"
-import { Link } from 'react-router-dom'
+import { HashLink } from 'react-router-hash-link';
 
 const MENU_LINKS = [
     {
@@ -10,17 +10,17 @@ const MENU_LINKS = [
     {
         id: "m1",
         title: "Компанії",
-        link: "#"
+        link: "/"
     },
     {
         id: "m2",
         title: "Стартапи",
-        link: "#"
+        link: "/"
     },
     {
         id: "m3",
         title: "Про нас",
-        link: "#"
+        link: "/#about-us"
     },
 ]
 
@@ -29,7 +29,7 @@ function Menu () {
         <div className={css["header-menu-section"]}>
             {MENU_LINKS.map( (element) => (
                 <div className={css["header-menu-element"]} key={element.id}>
-                    <Link className={css["header-menu-element__text"]} to={element.link}>{element.title}</Link>
+                    <HashLink className={css["header-menu-element__text"]} to={element.link}>{element.title}</HashLink>
                 </div>
             ))}
         </div>

diff --git a/FrontEnd/src/components/landing-page/about-section/About.js b/FrontEnd/src/components/landing-page/about-section/About.js
@@ -11,7 +11,7 @@ const MainAboutSection = () => {
           <div className="about-us-section-content">
             <div className="about-us-rectangle">
             <div className="about-us-section-content__field"/>
-            <div className="about-us-section-content__text">
+            <div className="about-us-section-content__text" id="about-us">
               <div className="about-us-section-content__header-text">ХТО МИ</div>
               <div className="about-us-section-content__smart-text">Це перший форум Західної України, цілями якого є популяризація українського виробника та представлення стартапів для розвитку галузі «Smart Craft&Food»</div>
               <div className="about-us-section-content__smart-text">Це перший форум Західної України, цілями якого є популяризація українського виробника та представлення стартапів для розвитку галузі «Smart Craft&Food»</div>