feat(contact): bottom screen navigation

app/components/Contact/BottomScreen/Background.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/contact/bottom-screen/background.png"
+    hidden
+  />
+</template>

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Background from "./Background.vue";
+import ButtonSelector from "~/components/Common/ButtonSelector.vue";
+
+const { selectorPosition } = useButtonNavigation({
+  buttons: {
+    github: [26, 27, 202, 42],
+    email: [26, 59, 202, 42],
+    website: [26, 91, 202, 42],
+    cv: [26, 123, 202, 42],
+  },
+  navigation: {
+    github: {
+      down: "email",
+    },
+    email: {
+      up: "github",
+      down: "website",
+    },
+    website: {
+      up: "email",
+      down: "cv",
+    },
+    cv: {
+      up: "website",
+    },
+  },
+  initialButton: "github",
+  onButtonClick: (buttonName) => {
+    console.log("Clicked on selected button:", buttonName);
+  },
+});
+</script>
+
+<template>
+  <Background />
+
+  <ButtonSelector
+    :x="selectorPosition[0]"
+    :y="selectorPosition[1]"
+    :width="selectorPosition[2]"
+    :height="selectorPosition[3]"
+  />
+</template>

app/components/Contact/TopScreen/Background.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/contact/top-screen/background.png"
+    hidden
+  />
+</template>

app/components/Contact/TopScreen/TopScreen.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Background from "./Background.vue";
+</script>
+
+<template>
+  <Background />
+</template>

app/pages/contact.vue

@@ -6,8 +6,12 @@ definePageMeta({
 
 <template>
   <NuxtLayout name="default">
-    <template #top> </template>
+    <template #top>
+      <ContactTopScreen />
+    </template>
 
-    <template #bottom> </template>
+    <template #bottom>
+      <ContactBottomScreen />
+    </template>
   </NuxtLayout>
 </template>