First layout test

src/App.vue

@@ -3,5 +3,54 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <div id="wrapper" class="py-16 px-8">
+    <RouterView />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+#wrapper {
+  position: relative;
+  min-height: 100dvh;
+  min-height: 100vh;
+  overflow-x: hidden;
+
+  display: grid;
+  grid-template-rows: 1fr;
+  isolation: isolate;
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.12) 0%,
+    rgba(0, 0, 0, 0) 10%,
+    rgba(0, 0, 0, 0) 90%,
+    rgba(0, 0, 0, 0.12) 100%
+  );
+
+  &::after,
+  &::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 50%;
+    content: '';
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+
+  &::before {
+    left: 0;
+    background-image: url('/yorha-bg-left.svg');
+    background-position: left;
+  }
+  &::after {
+    right: 0;
+    background-image: url('/yorha-bg-right.svg');
+    background-position: right;
+  }
+}
+</style>

src/assets/main.css

@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 bg-[url('/yorha-bg.svg')] bg-contain bg-no-repeat
+}
+
+body::before {
+  @apply absolute content-[''] h-full w-full bg-[url('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
+}

src/components/YrhButton.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  href?: string
+  target?: string
+  rel?: string
+  disabled?: boolean
+  isActive?: boolean
+  hasSquare?: boolean
+}>()
+
+const attributes = {
+  href: props.href,
+  target: props.target,
+  rel: props.rel,
+  disabled: props.disabled
+}
+
+const elementTag = computed(() => (props.href ? 'a' : 'button'))
+</script>
+
+<template>
+  <component
+    :is="elementTag"
+    v-bind="attributes"
+    class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
+    :class="{ active: isActive }"
+  >
+    <span class="mr-1" v-if="hasSquare">
+      <font-awesome-icon :icon="['fas', 'square']" />
+    </span>
+    <slot />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  position: relative;
+  isolation: isolate;
+
+  transition-property: color;
+  transition-duration: 0.5s;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transition-delay: 0;
+
+  & + & {
+    margin-top: 1rem;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    left: 0;
+    height: 100%;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    top: 0;
+    left: 0;
+    width: 0%;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    background-color: var(--color-y-beige-700);
+    z-index: -1;
+  }
+
+  &::before {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    transition-property: border-color;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    border-top: 0.05rem solid transparent;
+    border-bottom: 0.05rem solid transparent;
+  }
+
+  &:not(:focus, :hover, .active) {
+    transition-delay: 0.15s;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus,
+  &:hover,
+  &.active {
+    color: var(--color-y-beige-400);
+
+    &::before {
+      height: calc(100% + 0.35rem);
+      border-top-color: var(--color-y-beige-700);
+      border-bottom-color: var(--color-y-beige-700);
+    }
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/YrhHeading.vue

@@ -0,0 +1,11 @@
+<template>
+  <h1 class="mb-8 text-4xl">
+    <slot />
+  </h1>
+</template>
+
+<style scoped>
+h1 {
+  text-shadow: 5px 5px 0px var(--color-y-beige-500);
+}
+</style>

src/main.ts

@@ -6,9 +6,16 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faSquare } from '@fortawesome/free-solid-svg-icons'
+
+/* add icons to the library */
+library.add(faSquare)
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-
+app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')

src/views/HomeView.vue

@@ -1,5 +1,16 @@
+<script lang="ts" setup>
+import YrhButton from '@/components/YrhButton.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+</script>
+
 <template>
   <main>
-    <h1 class="text-3xl font-bold underline">Hello world!</h1>
+    <YrhHeading> MENU PRINCIPAL </YrhHeading>
+    <YrhButton has-square> Language </YrhButton>
+    <YrhButton has-square> Settings </YrhButton>
+    <YrhButton has-square> Camera </YrhButton>
+    <YrhButton has-square> Screen </YrhButton>
+    <YrhButton has-square> Sound </YrhButton>
+    <YrhButton has-square> Other </YrhButton>
   </main>
 </template>