From aad35e711985a7ffc0c4d09c4c414d68b2aa1e9b Mon Sep 17 00:00:00 2001
From: migbash <20924663+migbash@users.noreply.github.com>
Date: Sun, 5 Nov 2023 22:52:05 +0100
Subject: [PATCH] #371 :: feat :: footer (v2) (v7) stable;

---
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 .../components/_main_/footer/Footer.svelte    | 408 ++++++++++--------
 src/routes/api/data/main/footer/+server.ts    |   7 +-
 4 files changed, 244 insertions(+), 187 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3d001289e..946314f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
 			"name": "betarena-scores-platform",
 			"version": "2.4.4",
 			"dependencies": {
-				"@betarena/scores-lib": "^1.9.8",
+				"@betarena/scores-lib": "^1.9.9",
 				"@lukeed/uuid": "^2.0.1",
 				"@metamask/sdk": "^0.1.0",
 				"@moralisweb3/client-firebase-auth-utils": "^2.18.4",
@@ -549,9 +549,9 @@
 			}
 		},
 		"node_modules/@betarena/scores-lib": {
-			"version": "1.9.8",
-			"resolved": "https://registry.npmjs.org/@betarena/scores-lib/-/scores-lib-1.9.8.tgz",
-			"integrity": "sha512-IgrwNhiafmiGYdNvwdVXWf9+fFwx59em0ExRiTa8cFlwelFoaGQHQ5bXLzLZXVDY1ToSm51OFes8/+NX19/deg==",
+			"version": "1.9.9",
+			"resolved": "https://registry.npmjs.org/@betarena/scores-lib/-/scores-lib-1.9.9.tgz",
+			"integrity": "sha512-zCcLNBxg/AINKRjdiBjcUqrgcr0k1jQeDEjAOQxEs7chbwR8OPwqRcdfI0bBrSDyRWFyB5P1vhX4wXBfeNdpjw==",
 			"dependencies": {
 				"firebase": "^9.17.2",
 				"graphql-request": "^5.0.0",
@@ -14514,9 +14514,9 @@
 			}
 		},
 		"@betarena/scores-lib": {
-			"version": "1.9.8",
-			"resolved": "https://registry.npmjs.org/@betarena/scores-lib/-/scores-lib-1.9.8.tgz",
-			"integrity": "sha512-IgrwNhiafmiGYdNvwdVXWf9+fFwx59em0ExRiTa8cFlwelFoaGQHQ5bXLzLZXVDY1ToSm51OFes8/+NX19/deg==",
+			"version": "1.9.9",
+			"resolved": "https://registry.npmjs.org/@betarena/scores-lib/-/scores-lib-1.9.9.tgz",
+			"integrity": "sha512-zCcLNBxg/AINKRjdiBjcUqrgcr0k1jQeDEjAOQxEs7chbwR8OPwqRcdfI0bBrSDyRWFyB5P1vhX4wXBfeNdpjw==",
 			"requires": {
 				"firebase": "^9.17.2",
 				"graphql-request": "^5.0.0",
diff --git a/package.json b/package.json
index a75e12ac5..680caaf25 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
 		"coverage": "vitest run --coverage"
 	},
 	"dependencies": {
-		"@betarena/scores-lib": "^1.9.8",
+		"@betarena/scores-lib": "^1.9.9",
 		"@lukeed/uuid": "^2.0.1",
 		"@metamask/sdk": "^0.1.0",
 		"@moralisweb3/client-firebase-auth-utils": "^2.18.4",
diff --git a/src/lib/components/_main_/footer/Footer.svelte b/src/lib/components/_main_/footer/Footer.svelte
index cc328d841..33ccd9c9e 100644
--- a/src/lib/components/_main_/footer/Footer.svelte
+++ b/src/lib/components/_main_/footer/Footer.svelte
@@ -1,39 +1,67 @@
-<!-- ===============
-COMPONENT JS (w/ TS)
-=================-->
+<!--
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+### COMPONENT JS (w/ TS)                                                               ◼️
+### NOTE:                                                                              ◼️
+### access custom Betarena Scores JS VScode Snippets by typing 'script...'             ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+-->
 
 <script lang="ts">
 
   // #region ➤ 📦 Package Imports
 
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  // ### NOTE:                                                            ◼️
+  // ### Please add inside 'this' region the 'imports' that are required  ◼️
+  // ### by 'this' .svelte file is ran.                                   ◼️
+  // ### IMPORTANT                                                        ◼️
+  // ### Please, structure the imports as follows:                        ◼️
+  // ### 1. svelte/sveltekit imports                                      ◼️
+  // ### 2. project-internal files and logic                              ◼️
+  // ### 3. component import(s)                                           ◼️
+  // ### 4. assets import(s)                                              ◼️
+  // ### 5. type(s) imports(s)                                            ◼️
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 
-	import SeoBox from '$lib/components/SEO-Box.svelte';
-
 	import sessionStore from '$lib/store/session.js';
-
-	import { dlog, FT_W_TAG } from '$lib/utils/debug';
 	import { viewport_change } from '$lib/utils/platform-functions';
 
-	import type { B_FOT_T } from '@betarena/scores-lib/types/footer.js';
+  import SeoBox from '$lib/components/SEO-Box.svelte';
+
+	import type { B_FOT_T } from '@betarena/scores-lib/types/types.main.footer.js';
 
   // #endregion ➤ 📦 Package Imports
 
   // #region ➤ 📌 VARIABLES
 
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  // ### NOTE:                                                            ◼️
+  // ### Please add inside 'this' region the 'variables' that are to be   ◼️
+  // ### and are expected to be used by 'this' .svelte file / component.  ◼️
+  // ### IMPORTANT                                                        ◼️
+  // ### Please, structure the imports as follows:                        ◼️
+  // ### 1. export const / let [..]                                       ◼️
+  // ### 2. const [..]                                                    ◼️
+  // ### 3. let [..]                                                      ◼️
+  // ### 4. $: [..]                                                       ◼️
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+
   const
+    /** @description 📌 `this` component **main** `id` and `data-testid` prefix. */
+    CNAME = 'global⮕footer⮕w⮕main',
+    /** @description 📱 MOBILE */
     VIEWPORT_MOBILE_INIT = 710,
+    /** @description 💻 TABLET */
     VIEWPORT_TABLET_INIT = 1160
   ;
 
   let
-    // ◼️ IMPORTANT
     isViewMobile: boolean = true,
     isViewTablet: boolean = true,
-    // ◼️ IMPORTANT
     B_FOT_T: B_FOT_T = $page.data?.B_FOT_T,
-    // ◼️ IMPORTANT
     homepageURL: string,
     logoLink: string,
     begambleawareorg: string,
@@ -46,35 +74,26 @@ COMPONENT JS (w/ TS)
       ? `/${$page.params.lang}`
       : `/`
   ;
-
   $: logoLink =
     $sessionStore?.serverLang != 'en'
       ? `${$page.url.origin}/${$sessionStore?.serverLang}`
       : $page.url.origin
   ;
-
-  $: B_FOT_T: B_FOT_T = $page.data?.B_FOT_T,
+  $: B_FOT_T: B_FOT_T = $page.data?.B_FOT_T;
 
   // #endregion ➤ 📌 VARIABLES
 
   // #region ➤ 🛠️ METHODS
 
-  /**
-   * @description form SUBMIT method to
-   * register user on the BETARENA EMAIL LIST
-  */
-	async function submitEmail
-  (
-  ): Promise < void >
-  {
-    // [🐞]
-    dlog
-    (
-      `${FT_W_TAG[0]} subscribing to email newsletter!`
-    );
-
-		$sessionStore.newsletterPopUpShow = true;
-	}
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  // ### NOTE:                                                            ◼️
+  // ### Please add inside 'this' region the 'methods' that are to be     ◼️
+  // ### and are expected to be used by 'this' .svelte file / component.  ◼️
+  // ### IMPORTANT                                                        ◼️
+  // ### Please, structure the imports as follows:                        ◼️
+  // ### 1. function (..)                                                 ◼️
+  // ### 2. async function (..)                                           ◼️
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
 
 	/**
 	 * @description reload current page;
@@ -93,6 +112,13 @@ COMPONENT JS (w/ TS)
 
   // #region ➤ 🔄 LIFECYCLE [SVELTE]
 
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  // ### NOTE:                                                            ◼️
+  // ### Please add inside 'this' region the 'logic' that should run      ◼️
+  // ### immediately and as part of the 'lifecycle' of svelteJs,          ◼️
+  // ### as soon as 'this' .svelte file is ran.                           ◼️
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+
   onMount
   (
     async () =>
@@ -132,13 +158,18 @@ COMPONENT JS (w/ TS)
 
 </script>
 
-<!-- ===============
-COMPONENT HTML
-NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
-=================-->
+<!--
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+### COMPONENT HTML                                                                     ◼️
+### NOTE:                                                                              ◼️
+### use 'CTRL+SPACE' to autocomplete global class=styles                               ◼️
+### NOTE:                                                                              ◼️
+### access custom Betarena Scores VScode Snippets by typing emmet-like abbrev.         ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+-->
 
 <!--
-FOOTER SEO
+FOOTER | SEO
 -->
 <SeoBox>
 
@@ -148,49 +179,56 @@ FOOTER SEO
   SOCIAL LINKS
   -->
   <p>
-    {B_FOT_T?.scores_footer_links?.latest_news}
+    {B_FOT_T?.links?.latest_news}
   </p>
   <p>
-    {B_FOT_T?.scores_footer_links?.about_us}
+    {B_FOT_T?.links?.about_us}
   </p>
   <p>
-    {B_FOT_T?.scores_footer_links?.betting_tips}
+    {B_FOT_T?.links?.betting_tips}
   </p>
   <p>
-    {B_FOT_T?.scores_footer_links?.privacy}
+    {B_FOT_T?.links?.privacy}
   </p>
   <p>
-    {B_FOT_T?.scores_footer_links?.social_networks}
+    {B_FOT_T?.links?.social_networks}
   </p>
   <p>
-    {B_FOT_T?.scores_footer_links?.terms}
+    {B_FOT_T?.links?.terms}
   </p>
+  <p>
+    {B_FOT_T?.links?.status}
+  </p>
+  <p>
+    {B_FOT_T?.links?.changelog}
+  </p>
+
 
   <!--
   SOCIAL LINKS - 2
   -->
-  {#each B_FOT_T?.scores_footer_links?.social_networks ?? [] as social_network}
+  {#each Object.keys(B_FOT_T?.links?.social_networks) ?? [] as key}
     <p>
-      {social_network[1]}
+      {B_FOT_T?.links?.social_networks?.[key]}
     </p>
   {/each}
 
 </SeoBox>
 
 <!--
-FOOTER COMPONENT
+FOOTER | Main Component
 -->
 <footer>
 
   <div
-    id="inner-footer"
+    id="{CNAME}⮕inner"
   >
 
     <!--
     BETARENA BRAND
     -->
     <div
-      id="brand"
+      id="{CNAME}⮕brand"
       on:click={() => reloadPage()}
       on:keypress={(e) => { if (e.key === 'Enter') reloadPage() }}
     >
@@ -230,9 +268,12 @@ FOOTER COMPONENT
     FOLLOW SOCIAL MEDIA LINKS
     -->
     <div
-      id="social-box"
+      id="{CNAME}⮕social-box"
     >
 
+      <!--
+      FOLLOW US (text)
+      -->
       <p
         class=
         "
@@ -242,14 +283,14 @@ FOOTER COMPONENT
         m-b-20
         "
       >
-        {B_FOT_T?.scores_footer_translations?.follow}
+        {B_FOT_T?.terms?.follow ?? 'Follow us'}
       </p>
 
       <!--
       SOCIAL MEDIA FOLLOWS
       -->
       <div
-        id="social-media-box"
+        id="{CNAME}⮕social-media-box"
         class=
         "
         column-start-grid
@@ -259,20 +300,20 @@ FOOTER COMPONENT
         <!--
         LIST OF SOCIAL MEDIA ICONS
         -->
-        {#each B_FOT_T?.scores_footer_links?.social_networks ?? [] as social_network}
+        {#each Object.keys(B_FOT_T?.links?.social_networks) ?? [] as key}
 
           <!--
           SOCIAL LINK
           -->
           <a
             rel="external"
-            href={social_network[1]}
+            href={B_FOT_T?.links?.social_networks?.[key]}
           >
             <img
               loading="lazy"
-              src="/assets/svg/footer/icon/{social_network[0].toString().toLocaleLowerCase()}.svg"
-              alt="{social_network[0].toString().toLocaleLowerCase()}-icon"
-              title="{social_network[0].toString().toLocaleLowerCase()}-icon"
+              src="/assets/svg/footer/icon/{key?.toLowerCase()}.svg"
+              alt="{key?.toLowerCase()}-icon"
+              title="{key?.toLowerCase()}-icon"
               width=32
               height=32
             />
@@ -288,7 +329,7 @@ FOOTER COMPONENT
     SUBSCRIBE TO NEWSLETTER
     -->
     <div
-      id="newsletter-box"
+      id="{CNAME}⮕newsletter-box"
     >
 
       <!--
@@ -301,62 +342,34 @@ FOOTER COMPONENT
         s-14
         w-normal
         m-b-8
-        text-left
+        {isViewMobile ? 'text-center' : 'text-left'}
         "
       >
-        {B_FOT_T?.scores_footer_translations?.subscribe_newsletter}
+        {B_FOT_T?.terms?.subscribe_newsletter ?? 'Subscribe to newsletter'}
       </p>
 
       <!--
-      FORM START
+      SUMIT BUTTON
       -->
-      <form
-        on:submit|preventDefault={() =>	submitEmail()}
-        class:row-space-out={!isViewTablet}
+      <button
+        id="newsletter-subscribe-btn"
+        class=
+        "
+        btn-primary
+        "
+        on:click={() => $sessionStore.newsletterPopUpShow = true}
       >
-
-        <!--
-        INPUT FIELD EMAIL
-        -->
-        <input
-          id=""
-          type="email"
-          name="type_email"
-          placeholder={B_FOT_T?.scores_footer_translations?.type_email}
+        <p
           class=
           "
+          color-white
           s-14
-          w-400
-          color-grey
-          "
-          class:m-b-12={isViewTablet}
-          class:m-r-20={!isViewTablet}
-        />
-
-        <!--
-        SUMIT BUTTON
-        -->
-        <button
-          id="newsletter-subscribe-btn"
-          class=
+          w-500
           "
-          btn-primary
-          "
-          type="submit"
         >
-          <p
-            class=
-            "
-            color-white
-            s-14
-            w-500
-            "
-          >
-            {B_FOT_T?.scores_footer_translations?.subscribe_cta}
-          </p>
-        </button>
-
-      </form>
+          {B_FOT_T?.terms?.subscribe_cta}
+        </p>
+      </button>
 
     </div>
 
@@ -364,9 +377,8 @@ FOOTER COMPONENT
     MENU LIST
     -->
     <div
-      id="menu-list"
+      id="{CNAME}⮕menu-list"
       class:row-space-start={!isViewMobile}
-      class:m-t-45={!isViewMobile && isViewTablet}
     >
 
       <ul>
@@ -383,7 +395,7 @@ FOOTER COMPONENT
         >
           <a
             rel="external"
-            href={B_FOT_T?.scores_footer_links?.latest_news}
+            href={B_FOT_T?.links?.latest_news}
           >
             <p
               class=
@@ -393,7 +405,7 @@ FOOTER COMPONENT
               w-normal
               "
             >
-              {B_FOT_T?.scores_footer_translations?.latest_news}
+              {B_FOT_T?.terms?.latest_news}
             </p>
           </a>
         </li>
@@ -414,7 +426,7 @@ FOOTER COMPONENT
         </li>
 
         <!--
-        BETTING TIPS
+        ABOUT US LINK
         -->
         <li
           class=
@@ -425,7 +437,7 @@ FOOTER COMPONENT
         >
           <a
             rel="external"
-            href={B_FOT_T?.scores_footer_links?.betting_tips}
+            href={B_FOT_T?.links?.about_us}
           >
             <p
               class=
@@ -435,7 +447,7 @@ FOOTER COMPONENT
               w-normal
               "
             >
-              {B_FOT_T?.scores_footer_translations?.betting_tips}
+              {B_FOT_T?.terms?.about_us}
             </p>
           </a>
         </li>
@@ -456,7 +468,7 @@ FOOTER COMPONENT
         </li>
 
         <!--
-        ABOUT US LINK
+        TERMS AND CONDITIONS
         -->
         <li
           class=
@@ -467,7 +479,7 @@ FOOTER COMPONENT
         >
           <a
             rel="external"
-            href={B_FOT_T?.scores_footer_links?.about_us}
+            href={B_FOT_T?.links?.terms}
           >
             <p
               class=
@@ -477,7 +489,7 @@ FOOTER COMPONENT
               w-normal
               "
             >
-              {B_FOT_T?.scores_footer_translations?.about_us}
+              {B_FOT_T?.terms?.terms}
             </p>
           </a>
         </li>
@@ -502,7 +514,7 @@ FOOTER COMPONENT
         </li>
 
         <!--
-        TERMS AND CONDITIONS
+        PRIVACY AND CONDITIONS
         -->
         <li
           class=
@@ -513,7 +525,7 @@ FOOTER COMPONENT
         >
           <a
             rel="external"
-            href={B_FOT_T?.scores_footer_links?.terms}
+            href={B_FOT_T?.links?.privacy}
           >
             <p
               class=
@@ -523,7 +535,7 @@ FOOTER COMPONENT
               w-normal
               "
             >
-              {B_FOT_T?.scores_footer_translations?.terms}
+              {B_FOT_T?.terms?.privacy}
             </p>
           </a>
         </li>
@@ -544,7 +556,49 @@ FOOTER COMPONENT
         </li>
 
         <!--
-        PRIVACY AND CONDITIONS
+        STATUS
+        -->
+        <li
+          class=
+          "
+          m-r-10
+          "
+          class:m-b-16={isViewMobile}
+        >
+          <a
+            rel="external"
+            href={B_FOT_T?.links?.status}
+          >
+            <p
+              class=
+              "
+              color-white
+              s-14
+              w-normal
+              "
+            >
+              {B_FOT_T?.terms?.status}
+            </p>
+          </a>
+        </li>
+
+        <!--
+        SEPARATOR
+        -->
+        <li
+          class=
+          "
+          m-r-10
+          "
+          class:m-b-16={isViewMobile}
+        >
+          <div
+            class="menu-separator"
+          />
+        </li>
+
+        <!--
+        CHANGELOG
         -->
         <li
           class=
@@ -555,7 +609,7 @@ FOOTER COMPONENT
         >
           <a
             rel="external"
-            href={B_FOT_T?.scores_footer_links?.privacy}
+            href={B_FOT_T?.links?.changelog}
           >
             <p
               class=
@@ -565,7 +619,7 @@ FOOTER COMPONENT
               w-normal
               "
             >
-              {B_FOT_T?.scores_footer_translations?.privacy}
+              {B_FOT_T?.terms?.changelog}
             </p>
           </a>
         </li>
@@ -578,12 +632,12 @@ FOOTER COMPONENT
     LEGAL BETTING ICON
     -->
     <div
-      id="legal-bet-box"
+      id="{CNAME}⮕legal-bet-box"
       class=
       "
       row-space-start
+      width-auto
       "
-      style="width: auto;"
     >
       <img
         loading="lazy"
@@ -608,7 +662,7 @@ FOOTER COMPONENT
     COMPANY DETAILS
     -->
     <div
-      id="company-box"
+      id="{CNAME}⮕company-box"
     >
 
       <p
@@ -655,10 +709,15 @@ FOOTER COMPONENT
 
 </footer>
 
-<!-- ===============
-COMPONENT STYLE
-NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/(CTRL+SPACE)
-=================-->
+<!--
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+### COMPONENT STYLE                                                                    ◼️
+### NOTE:                                                                              ◼️
+### auto-fill/auto-complete iniside <style> for var() values by typing/CTRL+SPACE      ◼️
+### NOTE:                                                                              ◼️
+### access custom Betarena Scores CSS VScode Snippets by typing 'style...'             ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+-->
 
 <style>
 
@@ -666,17 +725,16 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
   {
     /* 🎨 style */
 		background: #292929;
-		height: 645px;
 		width: -webkit-fill-available;
 		padding: 48px 18px;
 		box-shadow: inset 0px 1px 0px #616161;
 	}
 
-	footer #inner-footer
+	div#global⮕footer⮕w⮕main⮕inner
   {
     /* 📌 position */
 		display: grid;
-    gap: 17px 85px;
+    gap: 32px 85px;
     grid-template-columns: 1fr;
     align-items: start;
 		justify-items: stretch;
@@ -685,7 +743,7 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 		text-align: center;
 	}
 
-  div#brand
+  div#global⮕footer⮕w⮕main⮕brand
   {
     /* 📌 position */
     grid-column: 1;
@@ -693,20 +751,20 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
     /* 🎨 style */
     justify-self: center;
   }
-	div#brand img
+	div#global⮕footer⮕w⮕main⮕brand img
   {
     /* 🎨 style */
 		height: 32px;
 		width: 151px;
 	}
 
-  div#social-box
+  div#global⮕footer⮕w⮕main⮕social-box
   {
     /* 📌 position */
     grid-column: 1;
     grid-row: 2;
   }
-  div#social-media-box
+  div#global⮕footer⮕w⮕main⮕social-media-box
   {
     /* 🎨 style */
 		gap: 16px;
@@ -714,21 +772,13 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 		width: 100%;
 	}
 
-  div#newsletter-box
+  div#global⮕footer⮕w⮕main⮕newsletter-box
   {
     /* 📌 position */
     grid-column: 1;
     grid-row: 3;
   }
-	div#newsletter-box input
-  {
-    /* 🎨 style */
-		background: #4b4b4b;
-		border-radius: 8px;
-		padding: 12px 20px;
-		width: 100%;
-	}
-	div#newsletter-box button#newsletter-subscribe-btn
+	div#global⮕footer⮕w⮕main⮕newsletter-box button#newsletter-subscribe-btn
   {
     /* 🎨 style */
 		height: 44px;
@@ -738,24 +788,23 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 		border-radius: 8px;
 	}
 
-  div#menu-list
+  div#global⮕footer⮕w⮕main⮕menu-list
   {
     /* 📌 position */
     grid-column: 1;
     grid-row: 4;
   }
-  div#menu-list ul
+  div#global⮕footer⮕w⮕main⮕menu-list ul
   {
     /* 📌 position */
 		display: flex;
     /* 🎨 style */
 		list-style-type: none;
-		/* flex-wrap: wrap; */
 		padding: 0;
 		margin: 0;
 		place-content: center;
 	}
-	div#menu-list div.menu-separator
+	div#global⮕footer⮕w⮕main⮕menu-list div.menu-separator
   {
     /* 🎨 style */
 		width: 1px;
@@ -763,7 +812,7 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 		background-color: #4b4b4b;
 	}
 
-  div#legal-bet-box
+  div#global⮕footer⮕w⮕main⮕legal-bet-box
   {
     /* 📌 position */
     grid-column: 1;
@@ -772,7 +821,7 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
     justify-content: center;
   }
 
-  div#company-box
+  div#global⮕footer⮕w⮕main⮕company-box
   {
     /* 📌 position */
     grid-column: 1;
@@ -780,9 +829,9 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
   }
 
   /*
-  =============
-  ⚡️ RESPONSIVNESS
-  =============
+  ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  ◼️ ⚡️ RESPONSIVNESS      ◼️
+  ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
   */
 
 	@media screen
@@ -795,10 +844,11 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 			padding: 68px 34px;
 		}
 
-    footer #inner-footer
+    div#global⮕footer⮕w⮕main⮕inner
     {
       /* 📌 position */
       display: grid;
+      gap: 32px 85px;
       grid-template-columns: repeat(2, auto);
       grid-template-rows: repeat(4, auto);
       justify-items: start;
@@ -807,53 +857,54 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
       justify-content: space-between;
 		}
 
-    div#brand
+    div#global⮕footer⮕w⮕main⮕brand
     {
       /* 🎨 style */
       justify-self: unset;
     }
 
-    div#social-box
+    div#global⮕footer⮕w⮕main⮕social-box
     {
       /* 📌 position */
       grid-column: 1;
       grid-row: 2;
     }
 
-		div#newsletter-box
+		div#global⮕footer⮕w⮕main⮕newsletter-box
     {
       /* 📌 position */
       grid-column: 2;
-      grid-row: 1 / 3;
+      grid-row: 2;
       /* 🎨 style */
 			width: 340px;
+      height: fit-content;
 		}
 
-    div#menu-list
+    div#global⮕footer⮕w⮕main⮕menu-list
     {
       /* 📌 position */
       grid-column: 1 / 3;
       grid-row: 3;
     }
-		div#menu-list ul
+		div#global⮕footer⮕w⮕main⮕menu-list ul
     {
 			place-content: unset;
 		}
 
-    div#company-box
+    div#global⮕footer⮕w⮕main⮕company-box
     {
       /* 📌 position */
       grid-column: 1;
       grid-row: 4;
     }
 
-    div#legal-bet-box
+    div#global⮕footer⮕w⮕main⮕legal-bet-box
     {
       /* 📌 position */
       grid-column: 2;
       grid-row: 4;
       /* 🎨 style */
-      justify-self: right;
+      justify-self: left;
     }
 
 	}
@@ -872,10 +923,13 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 			text-align: -moz-center;
 		}
 
-		footer #inner-footer
+		/*
+    ▓▓ inner container */
+    div#global⮕footer⮕w⮕main⮕inner
     {
       /* 📌 position */
 			display: grid;
+      gap: 17px 85px;
       grid-template-columns: repeat(3, auto);
       grid-template-rows: repeat(2, auto);
 			justify-content: space-between;
@@ -883,41 +937,41 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
       align-items: end;
 		}
 
-    div#menu-list
+    /*
+    ▓▓ platform menu list */
+    div#global⮕footer⮕w⮕main⮕menu-list
     {
       /* 📌 position */
       grid-column: 2;
       grid-row: 2;
     }
 
-    div#newsletter-box
+    /*
+    ▓▓ newsletter box */
+    div#global⮕footer⮕w⮕main⮕newsletter-box
     {
       /* 📌 position */
-      grid-column: 2;
+      grid-column: 3;
       grid-row: 1;
       /* 🎨 style */
 			width: 100%;
 		}
-		div#newsletter-box input
-    {
-      /* 🎨 style */
-			width: 100%;
-			min-width: 430px;
-		}
-		div#newsletter-box button#newsletter-subscribe-btn
+		div#global⮕footer⮕w⮕main⮕newsletter-box button#newsletter-subscribe-btn
     {
       /* 🎨 style */
 			padding: 11.5px 23.5px;
-			width: fit-content;
+      min-width: 328px;
 		}
 
-    div#social-box
+    /*
+    ▓▓ social box */
+    div#global⮕footer⮕w⮕main⮕social-box
     {
       /* 📌 position */
-      grid-column: 3;
+      grid-column: 2;
       grid-row: 1;
     }
-    div#social-media-box
+    div#global⮕footer⮕w⮕main⮕social-media-box
     {
       /* 🎨 style */
 			justify-content: left;
@@ -926,14 +980,18 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
       width: 100%;
     }
 
-    div#company-box
+    /*
+    ▓▓ company box */
+    div#global⮕footer⮕w⮕main⮕company-box
     {
       /* 📌 position */
       grid-column: 1;
       grid-row: 2;
     }
 
-    div#legal-bet-box
+    /*
+    ▓▓ legal bet box */
+    div#global⮕footer⮕w⮕main⮕legal-bet-box
     {
       /* 📌 position */
       grid-column: 3;
diff --git a/src/routes/api/data/main/footer/+server.ts b/src/routes/api/data/main/footer/+server.ts
index cbb5e4f2e..5b82a816c 100644
--- a/src/routes/api/data/main/footer/+server.ts
+++ b/src/routes/api/data/main/footer/+server.ts
@@ -8,12 +8,12 @@
 import { json } from '@sveltejs/kit';
 
 import { LFOOT_L_ENTRY_1 } from '@betarena/scores-lib/dist/functions/func.main.footer.js';
-import { FOT_C_T_A } from '@betarena/scores-lib/dist/redis/config.js';
+import { FOT_C_T_A1 } from '@betarena/scores-lib/dist/redis/config.js';
 import dotenv from 'dotenv';
 import LZString from 'lz-string';
 import { get_target_hset_cache_data } from '../../../../../lib/redis/std_main';
 
-import type { B_FOT_T } from '@betarena/scores-lib/types/footer.js';
+import type { B_FOT_T } from '@betarena/scores-lib/types/types.main.footer.js';
 
 // #endregion ➤ Package Imports
 
@@ -59,7 +59,7 @@ export async function GET
       {
         data = await get_target_hset_cache_data
         (
-          FOT_C_T_A,
+          FOT_C_T_A1,
           lang
         );
       }
@@ -141,7 +141,6 @@ async function fallbackMainData
 {
   const dataRes0: [ Map < string, B_FOT_T >, string[] ] = await LFOOT_L_ENTRY_1
   (
-    null,
     [lang]
   );