fix footer

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
-    official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/layout/UiFooter/UiFooter.vue

@@ -22,7 +22,6 @@
         </div>
       </div>
     </div>
-    <!-- <img class="absolute top-6" src="/src/assets/img/webp/footer-flowers.webp" /> -->
   </footer>
 </template>
 

src/layout/UiHeader/UiHeader.vue

@@ -1,9 +1,9 @@
 <template>
-  <header class="[&]:bg-accent text-white py-4 container mx-auto">
+  <header class="py-4 container mx-auto">
     <div class="flex flex-row-reverse justify-end gap-4 items-center">
       <slot name="content" />
       <div class="flex items-center gap-32">
-        <div class="russo-one-regular">
+        <div class="russo-one-regular cursor-pointer !text-primary">
           <UiParagraph tag="span" class="[&]:text-5xl">
             <RouterLink to="/"> Vino Galante </RouterLink>
           </UiParagraph>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import UiNav from '@/components/UiNav/UiNav.vue'
+import { RouterLink } from 'vue-router'
 import { headerNavigation } from './_data'
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 </script>

src/layout/UiLayout.vue

@@ -1,11 +1,15 @@
 <template>
   <div
     class="min-h-svh bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-0"
+  >
+    <div
+      class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
     >
       <UiHeader />
-    <UiMain />
+      <UiMain class="!min-h-[800px]" />
       <UiFooter />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">