From 6019762959735099db255b6dbbb48c9959c0321b Mon Sep 17 00:00:00 2001
From: Alexandre Chopin <alex@nuxtjs.com>
Date: Mon, 3 Jul 2023 11:23:05 +0200
Subject: [PATCH] improve menu and seo

---
 components/AppHeader.vue | 20 ++++++++++----------
 components/hero/Page.vue |  2 +-
 pages/index.vue          | 26 +++++++++++++-------------
 pages/integrations.vue   |  2 +-
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index f780e1a2d..f4e018a74 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -62,12 +62,19 @@ function scrollToTop(e) {
           <span class="i-ph-rocket-light h-5 w-5 mr-3 block lg:hidden" />
           Docs
         </NuxtLink>
+        <NuxtLink
+          to="/showcases"
+          class="flex items-center"
+        >
+          <span class="i-ph-sparkle-light h-5 w-5 mr-3 block lg:hidden" />
+          Showcase
+        </NuxtLink>
         <NuxtLink
           to="/integrations"
           class="flex items-center"
         >
           <span class="i-ph-plug-light h-5 w-5 mr-3 block lg:hidden" />
-          Integrations
+          Modules
         </NuxtLink>
         <NuxtLink
           to="/templates"
@@ -76,19 +83,12 @@ function scrollToTop(e) {
           <span class="i-ph-app-window-light h-5 w-5 mr-3 block lg:hidden" />
           Templates
         </NuxtLink>
-        <NuxtLink
-          to="/showcases"
-          class="flex items-center"
-        >
-          <span class="i-ph-sparkle-light h-5 w-5 mr-3 block lg:hidden" />
-          Showcases
-        </NuxtLink>
         <NuxtLink
           to="/blog"
           class="flex items-center"
         >
           <span class="i-ph-newspaper-light h-5 w-5 mr-3 block lg:hidden" />
-          News
+          Blog
         </NuxtLink>
       </nav>
       <div class="hidden lg:flex flex-1 items-center justify-end space-x-4">
@@ -127,7 +127,7 @@ function scrollToTop(e) {
 
 <style scoped lang="postcss">
 a {
-  @apply text-sm font-medium tracking-wide text-gray-300 hover:text-green-500;
+  @apply text-[15px] font-medium tracking-wide text-gray-300 hover:text-green-500;
 }
 a.router-link-active {
   @apply text-green-500 hover:text-green-500;
diff --git a/components/hero/Page.vue b/components/hero/Page.vue
index 015fcd508..965c14261 100644
--- a/components/hero/Page.vue
+++ b/components/hero/Page.vue
@@ -2,7 +2,7 @@
   <div class="relative z-0">
     <div class="hidden dark:block absolute w-full h-full top-5 grad blur-2xl opacity-20 z-0" />
     <div class="relative text-center py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 z-10">
-      <h2 class="text-gray-900 dark:text-gray-100 text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight">
+      <h2 class="text-gray-100 text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight">
         <slot name="title">
           Missing Title
         </slot>
diff --git a/pages/index.vue b/pages/index.vue
index f60b51c20..5eef162e9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,28 +7,28 @@ const { data: page } = await useFetch('/api/pages/index')
 watch(page.value, () => {
   console.log('page updated', page.value)
 })
-
-
-const { editing } = useEditable(page)
-
-useSeoMeta(page.value.$seoMeta)
+// Perfect SeoMeta sentences length and key wording according to Google:
+// Title: 55-60 characters
+// Description: 150-165 characters
+useSeoMeta({
+  title: 'Nuxt: Open source software for web developers and teams',
+  description: 'Nuxt is an open source cutting-edge software vendor and developer community specializing in the creation of intuitive and powerful modern web development tools.'
+})
 </script>
 
 <template>
   <div>
     <!-- Welcome -->
     <section class="bg-navy py-20 sm:py-30 md:py-44">
-      <UContainer class="flex items-center justify-center">
-        <div class="text-center z-10">
-          <Text
-            v-model="page.hero.title"
-            tag="h2"
-            class="text-gray-100 text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-center tracking-tight"
-          />
+      <UContainer class="flex items-center">
+        <div class="z-10">
+          <h2 class="text-gray-100 text-4xl sm:text-6xl md:text-7xl font-semibold tracking-tight">
+            The complete solution<br/>for web businesses
+          </h2>
           <Text
             v-model="page.hero.description"
             tag="p"
-            class="text-gray-300 md:text-lg lg:text-xl text-center pt-4 pb-6 md:pt-6 md:pb-8 lg:pt-7 lg:pb-10 xl:pt-8 xl:pb-10 lg:!leading-relaxed"
+            class="text-gray-300 md:text-lg lg:text-xl pt-4 pb-6 md:pt-6 md:pb-8 lg:pt-7 lg:pb-10 xl:pt-8 xl:pb-10 lg:!leading-relaxed"
           />
           <InlineCodeBlock :code="page.hero.snippet" />
         </div>
diff --git a/pages/integrations.vue b/pages/integrations.vue
index fbf2ac32e..e1e6c4ae1 100644
--- a/pages/integrations.vue
+++ b/pages/integrations.vue
@@ -17,7 +17,7 @@ const stats = computed(() => {
       <UContainer>
         <HeroPage>
           <template #title>
-            Ship faster with<br><span class="text-green-500">seamless integrations</span>
+            Connect with<br><span class="text-green-500">seamless integrations</span>
           </template>
           <template #description>
             Extend your application by using integrations for your favorite tools and services such as headless CMS, eCommerce, Database or UI/UX libraries with a single line of code.