change address and seo updates

Author: Rufflet

components/TheFooter.vue

@@ -1,30 +1,69 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const year = new Date().getFullYear();
+</script>
 
 <template>
   <footer>
-    <span>All rights reserved 2024 © ValidStack</span>
-    <address>
-      <span>London office: 13 Brook Street, London KT1 2BN, UK</span>
+    <div>
+      <h3>Office location</h3>
+      <address>Gladsaxevej 34, st. th., 2860 Søborg, Denmark</address>
+      <span>CVR 45290980</span>
+    </div>
+    <div>
+      <h3>Get in touch</h3>
       <a href="mailto:hello@validstack.pro">hello@validstack.pro</a>
-    </address>
+      <div class="social">
+        <a href="https://github.com/ValidStack" title="Follow us on GitHub" target="_blank">
+          <img src="/img/github.png" alt="github" />
+        </a>
+        <!-- <a
+          href="https://www.upwork.com/agencies/validstack/"
+          title="Hire us on Upwork (for small projects)"
+        >
+          <img src="/img/upwork.png" alt="upwork logo" />
+        </a> -->
+      </div>
+    </div>
   </footer>
 </template>
 
 <style lang="postcss">
 footer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   color: #000;
   padding: 10px;
   background-color: #e5e5e5;
+  min-height: 100px;
 
-  address {
+  div {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    flex: 1;
+    line-height: 1.5;
+
+    h3 {
+      font-weight: bold;
+    }
+
+    img {
+      max-width: 20px;
+    }
+  }
+
+  .social {
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+
+    a {
+      margin: 0 5px;
+    }
+
   }
 }
 </style>

components/TheHeader.vue

@@ -25,15 +25,15 @@ const menuItems = [
       <a :href="'#' + item.url" v-for="item in menuItems" :key="item.name">{{
         item.name
       }}</a>
-      <a
+    </div>
+    <div class="links">
+      <!-- <a
         href="https://www.upwork.com/agencies/validstack/"
         title="Hire us on Upwork"
       >
         Hire us
       </a>
-    </div>
-    <div class="links">
-      <!-- <a
+      <a
         href="https://www.upwork.com/agencies/validstack/"
         title="Hire us on Upwork"
       >

layouts/default.vue

@@ -36,8 +36,8 @@ html {
   width: 100%;
   height: 100%;
   background-color: #fff;
-  /* color: #333; */
-  /* font-family: monospace, Arial, Helvetica, sans-serif; */
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
 .vs-site {

nuxt.config.ts

@@ -8,6 +8,23 @@ export default defineNuxtConfig({
 
   app: {
     rootId: "vs-site-wrapper",
+    head: {
+      title: 'ValidStack - Web Development, Data Visualization & Backend Solutions',
+      meta: [
+        { name: 'description', content: 'ValidStack offers professional web and mobile development services. We specialize in frontend, backend, API development, and data visualization, ensuring high-quality solutions tailored to your business needs.' },
+        { name: 'keywords', content: 'web development, mobile development, frontend, backend, Vue, Nuxt, Strapi, Node.js, React, API, GraphQL, OSS, BSS, Big Data' },
+        { name: 'robots', content: 'index, follow' },
+        { property: 'og:title', content: 'ValidStack - Web Development, Data Visualization & Backend Solutions' },
+        { property: 'og:description', content: 'Transform your ideas into reality with ValidStack. We build scalable and dynamic enterprise solutions.' },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:url', content: 'https://validstack.pro' },
+        { property: 'og:image', content: 'https://validstack.pro/preview.jpg' },
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: 'ValidStack - Web Development, Data Visualization & Backend Solutions' },
+        { name: 'twitter:description', content: 'Providing top-tier web and mobile solutions with expertise in Vue, Nuxt, Strapi, and more.' },
+        { name: 'twitter:image', content: 'https://validstack.pro/preview.jpg' }
+      ]
+    }
   },
 
   css: [
@@ -26,18 +43,11 @@ export default defineNuxtConfig({
     '@nuxt/content',
     '@nuxt/image',
     'nuxt-gtag',
-    '@zadigetvoltaire/nuxt-gtm',
   ],
   gtag: {
-    enabled: process.env.NODE_ENV === 'production', // Enable only in production
-    id: 'G-TE6K13CVN3', 
-  },
-  gtm: {
-    enabled: process.env.NODE_ENV === 'production', 
-    id: 'GTM-M6CLXHQC', 
-    defer: false,
-    debug: true,
-    enableRouterSync: true,
+    enabled: process.env.NODE_ENV === 'production',
+    id: 'GTM-M6CLXHQC',
+    // id: 'G-TE6K13CVN3', 
   },
 
   compatibilityDate: "2024-10-21",