Featprivacy policy and terms of use sections

app/app/components/footer/footer.tsx

@@ -1,21 +1,21 @@
-import React, { useState } from 'react'
+import React from 'react'
 
+import NavbarFooter from '../navBars/navbarFooter'
 import { Translations } from '../utils'
 
 import About from './about'
-import Navbar from './navbar'
 
 interface Footer {
   translations: Translations
+  currentPage: string
+  urlParams: URLSearchParams | null
 }
 
-const Footer: React.FC<Footer> = ({ translations }) => {
-  const [currentPage, setCurrentPage] = useState<string>('home')
-
+const Footer: React.FC<Footer> = ({ translations, currentPage, urlParams }) => {
   return (
     <footer className="flex flex-col lg:flex-row xl:flex-row 2xl:flex-row -mx-6 bg-zinc-300 text-center">
       <About translations={translations} />
-      <Navbar translations={translations} currentPage={currentPage} setCurrentPage={setCurrentPage} />
+      <NavbarFooter translations={translations} currentPage={currentPage} urlParams={urlParams} />
     </footer>
   )
 }

app/app/components/navBars/navbarFooter.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link'
+
+import { Translations } from '../utils'
+
+interface NavBarFooter {
+  translations: Translations
+  currentPage: string
+  urlParams: URLSearchParams | null
+}
+
+const NavbarFooter: React.FC<NavBarFooter> = ({ translations, currentPage, urlParams }) => {
+  const urlData = (urlParams: URLSearchParams | null): string => {
+    let data = ''
+    if (null === urlParams) {
+      return data
+    }
+
+    if (null !== urlParams.get('oob')) {
+      data = '/?oob=' + urlParams.get('oob')
+    }
+
+    if (null !== urlParams.get('_oob')) {
+      data = '/?_oob=' + urlParams.get('_oob')
+    }
+
+    return data
+  }
+
+  return (
+    <div className="lg:p-4 xl:p-4 2xl:p-4 lg:flex xl:flex 2xl:flex lg:flex-1 xl:flex-1 2xl:flex-1 order-1 lg:order-2 xl:order-2 2xl:order-2 lg:space-x-4 xl:space-x-4 2xl:space-x-4 items-center text-center">
+      <nav className="justify-center w-[100%]">
+        º
+        <div className="flex justify-center h-10">
+          <div className="flex text-sm lg:text-lg xl:text-lg 2xl:text-lg font-medium">
+            <Link
+              href={`/` + urlData(urlParams)}
+              className={`px-3 py-2 text-center ${
+                currentPage === '/' ? 'text-hologram-color underline' : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {translations.nav_home}
+            </Link>
+            <Link
+              href={`terms` + urlData(urlParams)}
+              className={`px-3 py-2 ${
+                currentPage === '/terms'
+                  ? 'text-hologram-color underline'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {translations.terms}
+            </Link>
+            <Link
+              href={`privacity` + urlData(urlParams)}
+              className={`px-3 py-2 ${
+                currentPage === '/privacity'
+                  ? 'text-hologram-color underline'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {translations.privacy}
+            </Link>
+          </div>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+export default NavbarFooter

app/app/components/navBars/navbarTopPage.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link'
+import React from 'react'
+
+import { Translations } from '../utils'
+
+interface NavBarTopPage {
+  translations: Translations
+  titleSection: string
+  urlParams: URLSearchParams | null
+}
+
+const NavBarTopPage: React.FC<NavBarTopPage> = ({ translations, titleSection, urlParams }) => {
+  const urlData = (urlParams: URLSearchParams | null): string => {
+    let data = ''
+    if (null === urlParams) {
+      return data
+    }
+
+    if (null !== urlParams.get('oob')) {
+      data = '/?oob=' + urlParams.get('oob')
+    }
+
+    if (null !== urlParams.get('_oob')) {
+      data = '/?_oob=' + urlParams.get('_oob')
+    }
+
+    return data
+  }
+
+  return (
+    <div className="lg:py-4 py-2 lg:flex lg:space-x-4 lg:flex-1 items-center text-center">
+      <nav className="justify-center w-[100%]">
+        <div className="flex justify-center h-10">
+          <div className="lg:flex-1 w-3/4">
+            <p className="text-left text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl text-hologram-color font-semibold">
+              {titleSection}
+            </p>
+          </div>
+          <div className="lg:flex-1  w-1/4 text-right lg:text-lg xl:text-lg 2xl:text-lg font-medium">
+            <Link
+              href={`/` + urlData(urlParams)}
+              className="px-3 py-2 underline text-gray-500 dark:text-gray-400"
+            >
+              {translations.nav_home}
+            </Link>
+          </div>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+export default NavBarTopPage

app/app/components/sections/sectionWhatIs.tsx

@@ -11,7 +11,7 @@ const SectionWhatIs: React.FC<SectionWhatIs> = ({ translations }) => {
   return (
     <section>
       <div className="flex flex-col 2xl:flex-row xl:flex-row lg:flex-row">
-        <div className="flex-1 flex items-center justify-center order-2 2xl:xl:lg:order-1">
+        <div className="flex-1 flex items-center justify-center order-2 2xl:order-1 xl:order-1 lg:order-1">
           <Image
             src={'images/what-is-hologram.svg'}
             alt={'what is hologram'}
@@ -21,7 +21,7 @@ const SectionWhatIs: React.FC<SectionWhatIs> = ({ translations }) => {
             priority={true}
           />
         </div>
-        <div className="flex-1 text-justify 2xl:px-20 xl:px-20 lg:px-20 order-1 2xlorder-2 :xl:order-2 lg:order-2">
+        <div className="flex-1 text-justify 2xl:px-20 xl:px-20 lg:px-20 order-1 2xl:order-2 xl:order-2 lg:order-2">
           <p
             className="
 							mb-6

app/app/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Image from 'next/image'
+import { usePathname } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 import QRCode from 'react-qr-code'
 
@@ -29,6 +30,7 @@ export default function HomePage() {
   const [url, setUrl] = useState<string>('')
   const [searchParams, setSearchParams] = useState<URLSearchParams | null>(null)
   const deviceType = useDeviceDetect()
+  const pathname: string = usePathname()
 
   useEffect(() => {
     const userLocale = navigator.language.startsWith('es') ? 'es' : 'en'
@@ -134,7 +136,7 @@ export default function HomePage() {
 
         <SectionStandardsBuilt translations={translations ?? {}} />
 
-        <Footer translations={translations ?? {}} />
+        <Footer translations={translations ?? {}} currentPage={pathname} urlParams={searchParams} />
 
         {/* 
         {deviceType === 'mobile' && (

app/app/privacity/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+import loadTranslations from '../../utils/loadTranslations'
+import { Header } from '../components'
+import Footer from '../components/footer/footer'
+import NavBarTopPage from '../components/navBars/navbarTopPage'
+import { Translations } from '../components/utils'
+
+const Privacity = () => {
+  const [translations, setTranslations] = useState<Translations>()
+  const pathname: string = usePathname()
+  const [searchParams, setSearchParams] = useState<URLSearchParams | null>(null)
+
+  useEffect(() => {
+    const userLocale = navigator.language.startsWith('es') ? 'es' : 'en'
+    const loadedTranslations = loadTranslations(userLocale)
+    setTranslations(loadedTranslations)
+    const params = new URLSearchParams(window.location.search)
+    setSearchParams(params)
+  }, [])
+
+  return (
+    <div
+      className="
+      container
+      mx-auto
+      2xl:px-28
+      xl:px-28
+      lg:px-28
+      px-6
+      bg-white
+      dark:bg-gray-900
+      text-black
+      dark:text-gray-300
+    "
+    >
+      <Header translations={translations ?? {}}></Header>
+
+      <NavBarTopPage
+        translations={translations ?? {}}
+        titleSection={translations?.privacy ?? ''}
+        urlParams={searchParams}
+      ></NavBarTopPage>
+
+      <section className="my-2 pb-36">
+        <p className="text-xl font-bold mb-4">{translations?.privacy_section_title}</p>
+        <p className="text-xl text-justify">{translations?.privacy_section_text}</p>
+      </section>
+
+      <Footer translations={translations ?? {}} currentPage={pathname} urlParams={searchParams}></Footer>
+    </div>
+  )
+}
+
+export default Privacity