Merge pull request #43 from 2060-io/38-terms-and-conditions

feat: Terms and Conditions, AND url page

app/app/components/navBars/navbarFooter.tsx

@@ -36,19 +36,19 @@ const NavbarFooter: React.FC<NavBarFooter> = ({ translations, currentPage, urlDa
         <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={`terms` + urlData}
+              href={`user#terms` + urlData}
               className={`px-1 lg:px-4 xl:px-4 2xl:px-4 py-2 text-center transition duration-300 ease-in-out hover:scale-95 ${
-                currentPage === '/terms'
+                currentPage.includes('terms')
                   ? 'text-hologram-color underline'
                   : 'text-gray-500 hover:text-gray-700'
               }`}
             >
               {translations.terms}
             </Link>
             <Link
-              href={`privacity` + urlData}
+              href={`user#privacy` + urlData}
               className={`px-1 lg:px-4 xl:px-4 2xl:px-4 py-2 text-center transition duration-300 ease-in-out hover:scale-95 ${
-                currentPage === '/privacity'
+                currentPage.includes('privacy')
                   ? 'text-hologram-color underline'
                   : 'text-gray-500 hover:text-gray-700'
               }`}

app/app/components/navBars/navbarTopPage.tsx

@@ -5,40 +5,33 @@ import { Translations } from '../utils'
 
 interface NavBarTopPage {
   translations: Translations
-  titleSection: string
-  urlParams: URLSearchParams | null
+  urlData: string
 }
 
-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
-  }
-
+const NavBarTopPage: React.FC<NavBarTopPage> = ({ translations, urlData }) => {
   return (
-    <div className="lg:py-4 py-2 lg:flex lg:space-x-4 lg:flex-1 items-center text-center">
+    <div
+      className="
+        container
+        mx-auto
+        2xl:px-28
+        xl:px-28
+        lg:px-28
+        px-6
+        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-3/4"></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)}
+              href={`/` + urlData}
               className="px-3 py-2 underline text-gray-500 dark:text-gray-400 hover:text-hologram-color"
             >
               {translations.nav_home}

app/app/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import Image from 'next/image'
-import { usePathname } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 
 import loadTranslations from '../utils/loadTranslations'
@@ -26,7 +25,6 @@ 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'
@@ -152,7 +150,7 @@ export default function HomePage() {
 
         <SectionStandardsBuilt translations={translations ?? {}} />
 
-        <Footer translations={translations ?? {}} currentPage={pathname} urlData={urlData} />
+        <Footer translations={translations ?? {}} currentPage={url} urlData={urlData} />
 
         {/* 
         {deviceType === 'mobile' && (

app/app/user/TranslationsKey.tsx

@@ -0,0 +1,31 @@
+import { Translations } from '../components/utils'
+
+export interface TranslationsKey {
+  name: string
+  isParagraph: boolean
+  isTitle1: boolean
+  isTitle2: boolean
+  isTitle3: boolean
+  classNameExtra?: string
+}
+
+export interface TermsAndPrivacy {
+  translations: Translations | undefined
+}
+
+const classNamesTitle1 = 'text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl text-hologram-color font-semibold'
+const classNameTitle2 = 'text-xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-semibold my-6'
+const classNameTitle3 = 'lg:text-3xl xl:text-3xl 2xl:text-3xl font-semibold my-6'
+const classNameParagraph = 'lg:text-xl xl:lg:text-xl 2xl:lg:text-xl text-justify'
+
+export const getStyleText = (translation: TranslationsKey): string => {
+  return translation.isParagraph
+    ? classNameParagraph
+    : translation.isTitle1
+      ? classNamesTitle1
+      : translation.isTitle2
+        ? classNameTitle2
+        : translation.isTitle3
+          ? classNameTitle3
+          : ''
+}

app/app/user/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+
+import loadTranslations from '../../utils/loadTranslations'
+import { Footer } from '../components/footer'
+import { NavBarTopPage } from '../components/navBars'
+import { Header, Translations } from '../components/utils'
+
+import Privacy from './privacy'
+import Terms from './terms'
+
+const TermsAndPrivacy = () => {
+  const [translations, setTranslations] = useState<Translations>()
+  const termsRef = useRef<HTMLDivElement | null>(null)
+  const privacyRef = useRef<HTMLDivElement | null>(null)
+  const [url, setUrl] = useState<string>('')
+  const [urlData, setUrlData] = useState<string>('')
+
+  useEffect(() => {
+    const userLocale = navigator.language.startsWith('es') ? 'es' : 'en'
+    const loadedTranslations = loadTranslations(userLocale)
+    setTranslations(loadedTranslations)
+    setUrl(window.location.href)
+
+    const handleScroll = () => setUrl(window.location.href)
+    window.addEventListener('scroll', handleScroll)
+
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const url = new URL(window.location.href)
+      const searchParams = new URLSearchParams(url.hash.substring(url.hash.indexOf('?')))
+      const oobValue = searchParams.get('oob')
+      const _oobValue = searchParams.get('_oob')
+
+      setUrlData(oobValue ? `/?oob=${oobValue}` : _oobValue ? `/?_oob=${_oobValue}` : '')
+    }
+  }, [url])
+
+  useLayoutEffect(() => {
+    const scrollTarget = url.includes('terms') ? termsRef : url.includes('privacy') ? privacyRef : null
+    scrollTarget?.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [url])
+
+  return (
+    <div className="mt-5 bg-white dark:bg-gray-900 text-black dark:text-gray-300">
+      <Header translations={translations ?? {}} urlData={urlData}></Header>
+
+      <NavBarTopPage translations={translations ?? {}} urlData={urlData}></NavBarTopPage>
+
+      <div ref={termsRef} className="container mx-auto px-6 2xl:px-28 xl:px-28 lg:px-28 mb-10">
+        <Terms translations={translations} />
+      </div>
+
+      <div ref={privacyRef} id="privacy" className="container mx-auto px-6 2xl:px-28 xl:px-28 lg:px-28 mb-16">
+        <Privacy translations={translations} />
+      </div>
+      <Footer translations={translations ?? {}} currentPage={url} urlData={urlData}></Footer>
+    </div>
+  )
+}
+
+export default TermsAndPrivacy