feat(home): navigation and outro animation to settings

app/components/Home/BottomScreen/Buttons/Buttons.vue

@@ -2,6 +2,7 @@
 import GameButton from "./GameButton.vue";
 import ContactButton from "./ContactButton.vue";
 import DownloadPlayButton from "./DownloadPlayButton.vue";
+import SettingsButton from "./SettingsButton.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
 const store = useHomeStore();
@@ -11,10 +12,13 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
     projects: [31, 23, 193, 49],
     contact: [31, 71, 97, 49],
     downloadPlay: [127, 71, 97, 49],
+    settings: [112, 167, 31, 26],
   },
   initialButton: "projects",
   onButtonClick: (button) => {
-    store.animateOutro(`/${button}`);
+    if (button === "downloadPlay") throw new Error("Not implemented");
+
+    store.animateOutro(button);
   },
   navigation: {
     projects: {
@@ -26,10 +30,15 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
     contact: {
       up: "projects",
       right: "downloadPlay",
+      down: "settings",
     },
     downloadPlay: {
       up: "projects",
       left: "contact",
+      down: "settings",
+    },
+    settings: {
+      up: "last",
     },
   },
 });
@@ -63,6 +72,11 @@ const getOpacity = (button?: (typeof selectedButton)["value"]) => {
     :y="72 + getButtonOffset('contact')"
     :opacity="getOpacity('contact')"
   />
+  <SettingsButton
+    :x="117"
+    :y="170 + getButtonOffset('settings')"
+    :opacity="getOpacity('settings')"
+  />
 
   <Selector :rect="selectorPosition" :opacity="getOpacity()" />
 </template>