feat: testimonials and stack section to the landing page (#192)

.vitepress/config.mts

@@ -31,10 +31,6 @@ export default defineConfig({
       { icon: 'x', link: 'https://twitter.com/sidebase_io' },
       { icon: 'discord', link: 'https://discord.gg/VzABbVsqAc' },
     ],
-    footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Developed by SIDESTREAM',
-    },
     search: {
       provider: 'local',
     },

.vitepress/theme/Layout.vue

@@ -2,16 +2,23 @@
 import DefaultTheme from 'vitepress/theme'
 
 import Banner from './components/Banner.vue'
-import Terminal from './components/Terminal/Terminal.vue'
+import Terminal from './components/Landing/Terminal/Terminal.vue'
 import SpinningGradient from './components/SpinningGradient.vue'
-// import GithubStarsButton from './components/GithubStarsButton.vue'
+import GithubFollowButton from './components/GithubFollowButton.vue'
+
+import StackSection from './components/Landing/Stack/Section.vue'
+import TestimonialsSection from './components/Landing/Testimonials/Section.vue'
+import FAQSection from './components/Landing/FAQ/Section.vue'
+import CustomDevelopmentSection from './components/Landing/CustomDevelopment.vue'
+import DocAd from './components/DocAd.vue'
+
+import Footer from './components/Landing/Footer.vue'
 
 const { Layout } = DefaultTheme
 
 // Banner Configuration
-const isBannerEnabled = true
+const isBannerEnabled = false
 const bannerConfig = {
-  // Leave text empty to disable the banner
   text: '✨ NuxtAuth v0.8.0 has been released! ✨',
   button: {
     href: 'https://github.com/sidebase/nuxt-auth/releases/tag/0.8.0',
@@ -22,19 +29,57 @@ const bannerConfig = {
 
 <template>
   <Layout>
-    <!--
     <template #nav-bar-content-after>
-      <GithubStarsButton owner="sidebase" repo="sidebase" />
+      <GithubFollowButton user="sidebase" />
     </template>
-    -->
 
     <template #home-hero-image>
       <Terminal />
     </template>
 
     <template #home-hero-before>
       <Banner v-if="isBannerEnabled" v-bind="bannerConfig" />
-      <SpinningGradient />
+      <SpinningGradient class="pt-4" />
+    </template>
+
+    <template #home-features-after>
+      <div class="relative PageContainer">
+        <img class="absolute left-0 top-[2vh] w-full h-full opacity-50 select-none pointer-events-none dark:opacity-100" src="/backgrounds/purple-blur.webp" alt="Background Image">
+        <div class="container relative mx-auto space-y-24">
+          <StackSection />
+          <TestimonialsSection />
+          <FAQSection />
+          <CustomDevelopmentSection />
+        </div>
+      </div>
+      <Footer class="mt-10" />
+    </template>
+
+    <template #doc-after>
+      <div class="pt-6">
+        <DocAd />
+      </div>
     </template>
   </Layout>
 </template>
+
+<style scoped>
+.PageContainer {
+  position: relative;
+  padding: 0 24px;
+}
+@media (min-width: 640px) {
+  .PageContainer {
+      padding: 0 48px;
+  }
+}
+@media (min-width: 960px) {
+  .PageContainer {
+      padding: 0 64px;
+  }
+}
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+</style>

.vitepress/theme/components/DocAd.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="relative isolate overflow-hidden border border-gray-300 dark:border-gray-800 bg-blue-50 dark:bg-gray-900 rounded-lg p-5">
+    <img class="absolute top-0 right-0 opacity-30 h-full py-7 px-5 pointer-events-none" src="/sidestream.svg">
+    <h2 class="relative font-bold tracking-tight">
+      In need of a consultant?
+    </h2>
+    <p class="relative text-sm">
+      Reach out and we can arrange a call!
+    </p>
+    <div class="relative mt-4 flex flex-col items-start gap-y-2">
+      <a
+        href="mailto:nils@sidestream.tech"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Send us an email!
+      </a>
+    </div>
+    <svg viewBox="0 0 1024 1024" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]" aria-hidden="true">
+      <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7" />
+      <defs>
+        <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
+          <stop stop-color="#7775D6" />
+          <stop offset="1" stop-color="#E935C1" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>

.vitepress/theme/components/GithubStarsButton.vue → .vitepress/theme/components/GithubFollowButton.vue

@@ -1,18 +1,14 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import StarIcon from './StarIcon.vue'
 
-const props = defineProps<{
-  owner: string
-  repo: string
-}>()
+const props = defineProps<{ user: string }>()
 
 const count = ref(0)
 
 async function fetchCount() {
-  const res = await fetch(`https://api.github.com/repos/${props.owner}/${props.repo}`)
+  const res = await fetch(`https://api.github.com/users/${props.user}`)
   const resJson = await res.json()
-  count.value = resJson.stargazers_count ?? 0
+  count.value = resJson.followers ?? 0
 }
 onMounted(fetchCount)
 </script>
@@ -22,16 +18,15 @@ onMounted(fetchCount)
     <a
       title="Github"
       class="Button"
-      :href="`https://github.com/${owner}/${repo}`"
+      :href="`https://github.com/${user}`"
       target="_blank"
       rel="noreferrer noopener"
     >
-      <StarIcon />
-      Star
+      Follow
     </a>
     <a
       class="Count"
-      :href="`https://github.com/${owner}/${repo}/stargazers`"
+      :href="`https://github.com/${user}`"
       aria-label="{label}"
       target="_blank"
       rel="noreferrer noopener"

.vitepress/theme/components/Landing/CustomDevelopment.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="relative isolate overflow-hidden border border-gray-300 dark:border-gray-800 bg-blue-50 dark:bg-gray-900 rounded-3xl px-6 py-10 sm:px-10">
+    <img class="absolute top-0 right-0 opacity-15 dark:opacity-30 h-full py-12 px-10 pointer-events-none" src="/sidestream.svg">
+
+    <h2 class="relative max-w-2xl text-2xl font-bold tracking-tight md:text-4xl">
+      In need of a consultant?
+    </h2>
+    <p class="relative max-w-xl md:text-lg leading-8">
+      Reach out and we can arrange a call!
+    </p>
+    <div class="relative mt-5 flex items-center gap-x-6">
+      <a href="mailto:nils@sidestream.tech" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+        Send us an email!
+      </a>
+      <a href="https://www.sidestream.tech/" target="_blank" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white">Visit website <span aria-hidden="true">→</span></a>
+    </div>
+    <svg viewBox="0 0 1024 1024" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]" aria-hidden="true">
+      <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7" />
+      <defs>
+        <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
+          <stop stop-color="#7775D6" />
+          <stop offset="1" stop-color="#E935C1" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>

.vitepress/theme/components/Landing/FAQ/Item.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+defineProps<{ item: { question: string, answer: string } }>()
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="pt-6">
+    <dt>
+      <button
+        class="flex w-full items-start justify-between text-left"
+        :class="{
+          'text-gray-500 dark:text-gray-400': !isOpen,
+          'text-gray-900 dark:text-white': isOpen,
+        }"
+        @click="isOpen = !isOpen"
+      >
+        <span class="text-base font-semibold leading-7">
+          {{ item.question }}
+        </span>
+        <span class="ml-6 flex h-7 items-center">
+          <span v-if="!isOpen" class="h-6 w-6"> + </span>
+          <span v-else class="h-6 w-6"> - </span>
+        </span>
+      </button>
+    </dt>
+    <p
+      v-if="isOpen"
+      class="mt-1 text-base leading-7 text-gray-600 dark:text-gray-300"
+    >
+      {{ item.answer }}
+    </p>
+  </div>
+</template>

.vitepress/theme/components/Landing/FAQ/Section.vue

@@ -0,0 +1,41 @@
+<script setup>
+import Item from './Item.vue'
+
+const faqs = [
+  {
+    question: 'What is the difference between sidebase and NuxtAuth?',
+    answer: 'sidebase is both the name for the starter and the open source community behind it. In addition to developing the sidebase starter, we also develop Nuxt modules to fill holes inside our starter!',
+  },
+  {
+    question: 'How do I build my app? ',
+    answer: `All stacks that sidebase generates are ready for development. They are also kept minimal, so that nothing get's in the way and you don't have to delete half of the files.`,
+  },
+  {
+    question: 'Why is TypeScript required?',
+    answer: `TypeScript (TS) is essential because it provides guard-rails for development: TS let's us know what we talk about in our meeting when we discuss what the roles array contains, it informs our code-editor what we might be trying to do and let's it help us (think of GitHub Co-Pilot, but less AI), it guarantees certain kinds of correctness that we could only discover as a "bug" when our application was already deployed.`,
+  },
+  {
+    question: 'What coding setup can you recommend? ',
+    answer: 'We recommend using VSCode with the following plugins: Volar, eslint, prisma, TailwindCSS IntelliSense. However, you can add or remove plugins to fit your coding setup!'
+  },
+  {
+    question: 'Can I contribute to sidebase?',
+    answer: 'Of course! we appreciate all the help the community gives us. Every repository under the sidebase github organization, contains a contributing guide (.github/CONTRIBUTING.md). This is a great place to start as it outlines our development process and where you can find issues to work on!'
+  }
+]
+</script>
+
+<template>
+  <div>
+    <h1 class="text-3xl font-semibold">
+      Do you still have questions?
+    </h1>
+    <p class="text-lg">
+      Here are some frequently asked questions about sidebase
+    </p>
+
+    <dl class="mt-8 space-y-6 divide-y divide-gray-900/10 dark:divide-white/10">
+      <Item v-for="faq in faqs" :key="faq.question" :item="faq" />
+    </dl>
+  </div>
+</template>

.vitepress/theme/components/Landing/Footer.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import GithubIcon from './Icons/Github.vue'
+import XIcon from './Icons/X.vue'
+</script>
+
+<template>
+  <footer class="border-t border-zinc-100 dark:border-zinc-800">
+    <div class="mx-auto max-w-7xl py-6 md:flex md:items-center md:justify-between">
+      <div class="flex items-center justify-center space-x-5 md:order-2">
+        <a href="https://github.com/sidebase" target="_blank">
+          <span class="sr-only">Github</span>
+          <GithubIcon />
+        </a>
+        <a href="https://x.com/sidebase_io" target="_blank">
+          <span class="sr-only">X or Twitter</span>
+          <XIcon />
+        </a>
+        <p class="opacity-30">
+          |
+        </p>
+        <a href="https://www.sidestream.tech/en/imprint" target="_blank" class="text-sm hover:text-zinc-500 dark:hover:text-white">
+          Imprint
+        </a>
+        <a href="https://www.sidestream.tech/jobs" target="_blank" class="text-sm hover:text-zinc-500 dark:hover:text-white">
+          Jobs
+        </a>
+      </div>
+      <div class="text-center md:text-start mt-8 text-zinc-600 dark:text-zinc-400 text-sm md:order-1 md:mt-0">
+        <p>
+          Developed by <a href="https://sidestream.tech" class="underline hover:text-zinc-500 dark:hover:text-zinc-300" target="_blank">SIDESTREAM</a>. Released under the MIT License.
+        </p>
+      </div>
+    </div>
+  </footer>
+</template>

.vitepress/theme/components/Landing/Icons/Github.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
+  </svg>
+</template>

.vitepress/theme/components/Landing/Icons/X.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z" />
+  </svg>
+</template>

.vitepress/theme/components/Landing/Stack/Card.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { StackItem } from './data'
+
+defineProps<{ item: StackItem }>()
+</script>
+
+<template>
+  <div class="bg-gray-100 rounded-lg overflow-hidden transition-all ring-green-400 hover:ring-2 dark:bg-zinc-900 dark:ring-green-800">
+    <div class="flex justify-between items-center gap-2 p-4 bg-green-500/30 dark:bg-green-800/30">
+      <div class="flex items-center gap-2">
+        <img v-if="typeof item.logoPath === 'string'" :src="item.logoPath" class="size-8">
+        <template v-else>
+          <img :src="item.logoPath.light" class="size-8 dark:hidden">
+          <img :src="item.logoPath.dark" class="size-8 hidden dark:block">
+        </template>
+        <h1 class="text-xl font-semibold">
+          {{ item.name }}
+        </h1>
+      </div>
+    </div>
+
+    <div class="p-4 text-sm">
+      {{ item.description }}
+    </div>
+  </div>
+</template>

.vitepress/theme/components/Landing/Stack/Section.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import Card from './Card.vue'
+
+import { stackItems } from './data'
+</script>
+
+<template>
+  <div>
+    <div class="relative grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
+      <Card
+        v-for="item in stackItems"
+        :key="item.name"
+        :item="item"
+      />
+    </div>
+  </div>
+</template>