Begin working on landing page and about page

components/TheNav.vue

@@ -4,10 +4,10 @@ const play = usePlaygroundStore()
 const guide = useGuideStore()
 const runtime = useRuntimeConfig()
 const commands = useCommandsStore()
-
 const repo = 'https://github.com/nuxt/learn.nuxt.com'
 const buildTime = new Date(runtime.public.buildTime)
 const timeAgo = useTimeAgo(buildTime)
+const route = useRoute()
 
 function downloadCurrentGuide() {
  if (!play.webcontainer)
@@ -67,6 +67,7 @@ addCommands(
  :class="guide.embeddedDocs ? 'z-embedded-docs-raised' : ''"
  >
  <button
+ v-if="route.path === '/welcome' || route.path !== '/about'"
  rounded p2
  hover="bg-active"
  title="Search"
@@ -103,6 +104,7 @@ addCommands(
  </template>
  </VDropdown>
  <button
+ v-if="route.path === '/welcome' || route.path !== '/about'"
  rounded p2
  title="Toggle terminal"
  hover="bg-active"
@@ -112,6 +114,14 @@ addCommands(
  <div i-ph-terminal-window-duotone text-2xl />
  </button>
  <ColorSchemeToggle />
+ <NuxtLink
+ rounded p2
+ title="About"
+ hover="bg-active"
+ to="/about"
+ >
+ <div i-carbon-help text-2xl />
+ </NuxtLink>
  <NuxtLink
  rounded p2
  title="GitHub"

content/2.concepts/1.index.md

@@ -6,7 +6,7 @@ ogImage: true
 
 In this chapter, we will cover the core concepts of Nuxt.
 
-Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. If you are not familiar with Vue.js, we recommend you to start with the [Vue Basics](/vue/intro) section and read the [official Vue documentation](https://vuejs.org/) first.
+Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. If you are not familiar with Vue.js, we recommend you to start with the [Vue Basics](/vue) section and read the [official Vue documentation](https://vuejs.org/) first.
 
 ## Automation and Conventions
 

pages/about.vue

@@ -0,0 +1,4 @@
+<template>
+ <TheNav />
+ <h1>About Page</h1>
+</template>

pages/index.vue

@@ -0,0 +1,12 @@
+<template>
+ <TheNav />
+ <!-- <div absolute top="1/2" left="1/2" translate=""> -->
+ <div h-screen flex items-center justify-center>
+ <nuxt-link to="/welcome">
+ <button rounded bg-green-600 p-3>
+ Begin Tutorial
+ </button>
+ </nuxt-link>
+ </div>
+ <!-- Make Homepage -->
+</template>