chore(docs): Finalize home page copy (#2882)

docs/components/CTAButton.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 const props = defineProps({
   primary: Boolean,
+  href: String
 })
 
 const classes = computed(() => {
@@ -12,7 +13,7 @@ const classes = computed(() => {
 
 <template>
   <a
-    href="/guides/"
+    :href="href || '/guides/'"
     class="btn text-md font-bold uppercase px-6 py-0.5 rounded-full"
     md="text-lg px-8 py-1.6"
     lg="py-2.8 px-12"

docs/components/HomeCreateFirstApp.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="py-16 xl:py-24 bg-secondary text-center lg:text-lg">
-    <h2 class="md:text-xl lg:text-2xl font-bold">
-      Create your first real-time app in minutes
-    </h2>
+    <h2 class="md:text-xl lg:text-2xl font-bold">Create your first real-time app in minutes</h2>
     <div class="py-8">
-      <img src="/img/coding-bird.svg" alt="" class="w-2/3 max-w-lg mx-auto" />
+      <img src="/img/coding-bird.svg" alt="" class="w-3/4 max-w-4xl mx-auto" />
     </div>
-    <p class="pb-2">
-      <a href="/docs">Check out the docs</a> to learn more about Feathers.
-    </p>
-    <p>
-      Feel free say hello on Discord, or show us some love on
-      <a href="https://twitter.com/feathersjs">Twitter</a>.
+    <p class="vp-doc pb-2"><a href="/guides/">Check out the docs</a> to learn more about Feathers.</p>
+    <p class="vp-doc">
+      Feel free say hello on <a href="https://discord.gg/qa8kez8QBx" target="_blank">Discord</a>, or show us
+      some love on <a href="https://twitter.com/feathersjs" target="_blank">Twitter</a>.
     </p>
   </div>
 </template>

docs/components/HomeFeatureGrid.vue

@@ -6,20 +6,20 @@ const cards = [
     title: 'Fast',
     imgSrc: '/img/feature-icons/Fast_Icon.svg',
     description:
-      'Leveraging a unique architecture, Feathers lets you focus on building your APIs and real-time applications quickly. You automatically get scalable HTTP and real-time APIs and stay prepared for whatever else the future might bring.',
+      'Leveraging a unique architecture, Feathers lets you focus on building your APIs and real-time applications quickly. You automatically get scalable HTTP and real-time APIs and stay prepared for whatever else the future might bring.'
   },
   {
     title: 'Universal',
     imgSrc: '/img/feature-icons/Universal_Icon.svg',
     description:
-      'Feathers can be used with NodeJS, in the browser, with React Native or with any other API client. You can use any database with many supported out of the box and connect your API seamlessly to any frontend framework.',
+      'Feathers can be used with NodeJS, in the browser, with React Native or with any other API client. You can use any database with <a href="/api/databases/adapters.html">many supported out of the box</a> and connect your API seamlessly to any frontend framework.'
   },
   {
     title: 'Flexible',
     imgSrc: '/img/feature-icons/Flexible_Icon.svg',
     description:
-      'Built for TypeScript, Feathers provides the structure to create complex applications but is flexible enough to not be in the way. With a large ecosystem of plugins you can include exactly what you need. No more, no less.',
-  },
+      'Built for TypeScript, Feathers provides the structure to create complex applications but is flexible enough to not be in the way. With <a href="/ecosystem/">a large ecosystem of plugins</a> you can include exactly what you need. No more, no less.'
+  }
 ]
 </script>
 

docs/components/HomeFeatureGridCard.vue

@@ -2,7 +2,7 @@
 defineProps({
   title: String,
   imgSrc: String,
-  description: String,
+  description: String
 })
 </script>
 
@@ -12,6 +12,6 @@ defineProps({
       <img :src="imgSrc" alt="" class="mx-auto w-42 h-42" />
     </div>
     <p class="font-bold text-xl">{{ title }}</p>
-    <p class="">{{ description }}</p>
+    <p class="vp-doc" v-html="description"></p>
   </div>
 </template>

docs/components/HomeQuickStart.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import CTAButton from './CTAButton.vue'
+</script>
+
+<template>
+  <div class="bg-neutral text-neutral-content flex flex-col items-center py-24" xl="py-32">
+    <h2 class="text-center pb-8 font-bold" md="text-xl px-16" lg="px-32 text-2xl">
+      Learn the basics and create your first real-time API in 15 minutes.
+    </h2>
+    <CTAButton href="/guides/basics/starting.html" primary>Quick Start</CTAButton>
+  </div>
+</template>

docs/components/HomeSupporter.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import CTAButton from "./CTAButton.vue"
-</script>
-
-<template>
-  <div
-    class="bg-neutral text-neutral-content flex flex-col items-center py-24"
-    xl="py-32"
-  >
-    <h2 class="text-center pb-8 font-bold" md="text-xl px-16" lg="px-32 text-2xl">
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-    </h2>
-    <CTAButton primary>Learn More</CTAButton>
-  </div>
-</template>

docs/index.md

@@ -10,8 +10,7 @@ titleTemplate: The API and Real-time Application Framework
 import HomeHero from './components/HomeHero.vue'
 import HomeFeature1 from './components/HomeFeature1.vue'
 import HomeFeature2 from './components/HomeFeature2.vue'
-import HomeSupporter from './components/HomeSupporter.vue'
-import HomeIndustryPartners from './components/HomeIndustryPartners.vue'
+import HomeQuickStart from './components/HomeQuickStart.vue'
 import HomeCreateFirstApp from './components/HomeCreateFirstApp.vue'
 import HomeFeatureGrid from './components/HomeFeatureGrid.vue'
 import HomeCTATextSection from './components/HomeCTATextSection.vue'
@@ -21,8 +20,7 @@ import Footer from './components/Footer.vue'
 <HomeHero />
 <HomeFeature1 />
 <HomeFeature2 />
-<HomeSupporter />
-<HomeIndustryPartners />
+<!-- <HomeQuickStart /> -->
 <HomeCreateFirstApp />
 <HomeFeatureGrid />
 <HomeCTATextSection text="Create your first Feathers app, today!" />