Feat: Navigation for policy pages

src/components/Logo.jsx

@@ -0,0 +1,20 @@
+// import logo from "../assets/svg/logo.svg";
+import logoWhite from "../assets/svg/logo-white.svg";
+
+const LOGO_TYPE_CLASSES = {
+    primary: '',
+    logoWhite: 'pl-5 md:pl-20 lg:pl-50 xl:pl-60 2xl:pl-40'
+}
+
+const Logo = ({children, className, logoType, ...otherProps}) => {
+    return (
+        <>
+            {/* <img src={logo} alt="logo" className={`${className} ${LOGO_TYPE_CLASSES[logoType]}`}/> */}
+            <img src={logoWhite} alt="logo" className={`${className} ${LOGO_TYPE_CLASSES[logoType]}`}/>
+
+        </>
+
+    );
+};
+
+export default Logo;

src/components/Navigation.jsx

@@ -0,0 +1,18 @@
+import Logo from "./Logo";
+
+const NAV_TYPE_CLASSES = {
+    green: 'border-b border-border_grey pt-5 fixed top-0 w-full z-50 bg-[radial-gradient(circle,_rgba(4,138,129,0.2)_19%,_rgba(40,83,107,1)_100%)] backdrop-blur-custom',
+    orange: 'border-b border-border_grey pt-5 fixed top-0 w-full z-50 bg-[radial-gradient(circle,_rgba(243,120,29,0.5)_77%,_rgba(255,106,106,0.5)_100%)] backdrop-blur-custom',
+};
+
+const Navigation = ({ children, className, navType }) => {
+    return (
+        <div className={`${className} ${NAV_TYPE_CLASSES[navType]}`}>
+        {/* className="w-[80%] md:w-[80%] border-b border-border_grey"> */}
+            <Logo logoType="logoWhite" />
+            {children}
+        </div>
+    );
+};
+
+export default Navigation;

src/pages/Landing.jsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import { getNumberOfJobs } from "../utils/fetchData";
 // images
 import logo from "../assets/svg/logo.svg";
+// import Navigat
+// ion from "../components/Navigation";
 import dungi from "../assets/svg/dungi.svg";
 // racheta
 import racheta from "../assets/svg/racheta.svg";
@@ -60,6 +62,7 @@ const Landing = () => {
       <nav className="w-[80%] md:w-[80%] border-b border-border_grey">
         <img src={logo} alt="peviitor-logo" />
       </nav>
+
       <main className="w-[70%] gap-y-10 flex flex-wrap justify-center xs:gap-0 sm:gap-0 md:gap-2 lg:gap-0 items-center sm:items-start mt-[8em] mb-[10em] font-PoppinsRegular text-left">
         <div className="order-1">
           <div className="relative w-[300px] md:w-[486px] lg:w-[340px] xl:w-[486px]">

src/pages/Privacy.jsx

@@ -1,18 +1,37 @@
-import React,  { useEffect } from "react";
+import React,  { useEffect, useState } from "react";
 import HomeLink from "../components/CustomLinks";
 import Layout from "../components/Layout";
+import Navigation from "../components/Navigation";
+import Button from "../components/Button";
+import scrollUpOrange from "../assets/svg/scroll-up-orange.svg";
 
 const Privacy = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
     useEffect(() => {
         window.scrollTo(0, 0);
     }, []);
 
+    useEffect(() => {
+        const checkScrollHeight = () => {
+          setIsVisible(window.scrollY > 500);
+        };
+        window.addEventListener("scroll", checkScrollHeight);
+
+        return () => window.removeEventListener("scroll", checkScrollHeight);
+    }, []);
+
+    function handleScrollToTop() {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+
     return (
         <Layout>
+            <Navigation navType="orange" />
             <header
                 role="banner"
                 className="font-PoppinsRegular w-full flex items-center justify-center flex-wrap flex-col py-16 md:py-24 lg:py-32 leading-[110%] bg-[radial-gradient(circle,_rgba(243,120,29,1)_77%,_rgba(255,106,106,1)_100%)]">
-                <h1 className="leading-[62px] text-white text-[40px] md:text-[44px] xl:text-[60px] font-semibold mb-2 text-center">
+                <h1 className="tracking-[1px] text-white text-[40px] md:text-[44px] mb-2 xl:text-[60px] font-semibold  text-center">
                     Confidențialitate
                 </h1>
             </header>
@@ -253,6 +272,14 @@ const Privacy = () => {
                     </ol>
                 </section>           
             </article>
+
+            <Button
+                buttonType="scrollToTop"
+                className={`${isVisible ? "opacity-100 pointer-events-auto" : ""}`}
+                onClick={handleScrollToTop}
+            >
+                <img src={scrollUpOrange} alt="scroll-up" />
+            </Button>
         </Layout>
     );
 };

src/pages/TermsOfUse.jsx

@@ -1,6 +1,7 @@
 import React,  { useEffect } from "react";
 import HomeLink from "../components/CustomLinks";
 import Layout from "../components/Layout";
+import Navigation from "../components/Navigation";
 
 const TermsOfUse = () => {
     useEffect(() => {
@@ -9,12 +10,23 @@ const TermsOfUse = () => {
 
     return (
         <Layout>
+            <Navigation navType="green"/>
             <header
                 role="banner"
-                className="font-PoppinsRegular w-full flex items-center justify-center flex-wrap flex-col py-16 md:py-24 lg:py-32 leading-[110%] bg-[radial-gradient(circle,_rgba(4,138,129,1)_19%,_rgba(40,83,107,1)_100%)]">
-                <h1 className="leading-[62px] text-white text-[40px] md:text-[44px] xl:text-[60px] font-semibold mb-2 text-center">
+                // className="font-PoppinsRegular w-full flex items-center justify-center flex-wrap flex-col py-16 md:py-24 lg:py-32 leading-[110%] bg-[radial-gradient(circle,_rgba(4,138,129,1)_19%,_rgba(40,83,107,1)_100%)]">
+                className="font-PoppinsRegular w-full flex justify-center flex-wrap flex-col py-16 md:py-24 lg:py-32 leading-[110%] bg-[radial-gradient(circle,_rgba(4,138,129,1)_19%,_rgba(40,83,107,1)_100%)]">
+
+                {/* <Navigation/> */}
+                <div className="items-center justify-center">
+
+                    <h1 className="leading-[62px] text-white text-[40px] md:text-[44px] xl:text-[60px] font-semibold mb-2 text-center">
+                        Condiții de utilizare
+                    </h1>
+                </div>
+
+                {/* <h1 className="leading-[62px] text-white text-[40px] md:text-[44px] xl:text-[60px] font-semibold mb-2 text-center">
                     Condiții de utilizare
-                </h1>
+                </h1> */}
             </header>
 
             <article className="font-PoppinsRegular flex flex-col w-full">

tailwind.config.js

@@ -32,6 +32,9 @@ module.exports = {
         hover_card_shadow: "0px 1px 2px 0px #0000004d",
         button_shadow: "0px 5px 5px 0px #00000040 inset",
         checbox_shadow: "0px 4px 14px 0px #0000001a;"
+      },
+      backdropBlur: {
+        custom: "8.9px"
       }
     }
   },