Added Consulting Section and custom Footer

Author: zoey-kaiser

.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

@@ -8,6 +8,9 @@ import GithubFollowButton from './components/GithubFollowButton.vue'
 
 import StackSection from './components/Landing/Stack/Section.vue'
 import TestimonialsSection from './components/Landing/Testimonials/Section.vue'
+import CustomDevelopmentSection from './components/Landing/CustomDevelopment.vue'
+
+import Footer from './components/Landing/Footer.vue'
 
 const { Layout } = DefaultTheme
 
@@ -43,8 +46,10 @@ const bannerConfig = {
         <div class="container relative mx-auto space-y-20">
           <StackSection />
           <TestimonialsSection />
+          <CustomDevelopmentSection />
         </div>
       </div>
+      <Footer class="mt-10" />
     </template>
   </Layout>
 </template>

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

@@ -0,0 +1,25 @@
+<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 text-center sm:px-16">
+    <h2 class="mx-auto max-w-2xl text-3xl font-bold tracking-tight sm:text-4xl">
+      In need of a consultant?
+    </h2>
+    <p class="mx-auto max-w-xl text-lg leading-8">
+      Reach out and we can arrange a call!
+    </p>
+    <div class="mt-5 flex items-center justify-center gap-x-6">
+      <a href="mailto:[email protected]" 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/Footer.vue

@@ -0,0 +1,26 @@
+<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 justify-center space-x-6 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>
+      </div>
+      <div class="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/style.css

@@ -121,6 +121,14 @@
     --vp-c-bg-soft: #202127;
   }
 
+  /**
+   * Component: Home
+   * -------------------------------------------------------------------------- */
+
+  .VPContent.is-home .VPHome {
+    margin-bottom: 0px !important;
+  }
+
   /**
    * Component: Button
    * -------------------------------------------------------------------------- */