Improved Testimonials grid

sidebase · Aug 21, 2024 · f0e8e55 · f0e8e55
1 parent 51d606a
commit f0e8e55
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 61 deletions.
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
@@ -9,6 +9,7 @@ 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 DocAd from './components/DocAd.vue'
 
 import Footer from './components/Landing/Footer.vue'
 
@@ -43,14 +44,20 @@ const bannerConfig = {
     <template #home-features-after>
       <div class="relative PageContainer">
         <img class="absolute inset-0 w-full h-full opacity-50 dark:opacity-100" src="/backgrounds/purple-blur.webp" alt="Background Image">
-        <div class="container relative mx-auto space-y-20">
+        <div class="container relative mx-auto space-y-24">
           <StackSection />
           <TestimonialsSection />
           <CustomDevelopmentSection />
         </div>
       </div>
       <Footer class="mt-10" />
     </template>
+
+    <template #doc-after>
+      <div class="pt-6">
+        <DocAd />
+      </div>
+    </template>
   </Layout>
 </template>
 

diff --git a/.vitepress/theme/components/DocAd.vue b/.vitepress/theme/components/DocAd.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-lg p-4">
+    <h2 class="font-bold tracking-tight">
+      In need of a consultant?
+    </h2>
+    <p class="text-sm">
+      Reach out and we can arrange a call!
+    </p>
+    <div class="mt-4 flex flex-col items-start gap-y-2">
+      <a
+        href="mailto:[email protected]"
+        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>
diff --git a/.vitepress/theme/components/Landing/Testimonials/Section.vue b/.vitepress/theme/components/Landing/Testimonials/Section.vue
@@ -10,47 +10,48 @@ import { testimonials } from './data'
     <h1 class="text-3xl font-semibold">
       What do others think of <span class="GradientText">sidebase</span>?
     </h1>
+    <p class="text-lg">
+      Have a look at what other developers have said about sidebase.
+    </p>
 
-    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
-      <div
-        v-for="testimonial in testimonials"
-        :key="testimonial.name"
-        class="flex flex-col justify-between bg-zinc-50 p-4 rounded-lg border hover:border-zinc-400 transition-colors dark:bg-zinc-900 dark:border-zinc-700 dark:hover:border-zinc-500"
-      >
-        <p class="font-semibold">
-          "{{ testimonial.text }}"
-        </p>
-        <div>
-          <hr class="my-3 border-zinc-200 dark:border-zinc-700">
-          <div class="flex items-center gap-2">
-            <img :src="testimonial.avatar" class="ring-green-500 h-12 w-12 rounded-full p-1 ring-2 dark:ring-green-700" alt="Avatar">
-            <div class="grow leading-3">
-              <h1 class="text-lg text-gray-700 dark:text-gray-100">
-                {{ testimonial.name }}
-              </h1>
-              <p v-if="testimonial.position" class="text-xs font-semibold text-gray-400">
-                {{ testimonial.position }}
-              </p>
-            </div>
-            <div class="flex items-center gap-1 self-end">
-              <a
-                v-if="testimonial.twitterLink"
-                :href="testimonial.twitterLink"
-                target="_blank"
-                rel="noreferrer noopener"
-                class="p-1 bg-green-300 rounded cursor-pointer hover:bg-green-400 dark:bg-green-800 dark:hover:bg-green-700"
-              >
-                <XIcon />
-              </a>
-              <a
-                v-if="testimonial.githubLink"
-                :href="testimonial.githubLink"
-                target="_blank"
-                rel="noreferrer noopener"
-                class="p-1 bg-green-300 rounded cursor-pointer hover:bg-green-400 dark:bg-green-800 dark:hover:bg-green-700"
-              >
-                <GithubIcon />
-              </a>
+    <div class="mt-8 columns-1 md:columns-2 gap-4 text-sm lg:columns-3">
+      <div v-for="testimonial in testimonials" :key="testimonial.name" class="block break-inside-avoid mb-4">
+        <div class="flex flex-col justify-between bg-zinc-50 p-4 rounded-lg border hover:border-zinc-400 transition-colors dark:bg-zinc-900 dark:border-zinc-700 dark:hover:border-zinc-500">
+          <p class="font-semibold">
+            "{{ testimonial.text }}"
+          </p>
+          <div>
+            <hr class="my-3 border-zinc-200 dark:border-zinc-700">
+            <div class="flex items-center gap-2">
+              <img :src="testimonial.avatar" class="ring-green-500 h-12 w-12 rounded-full p-1 ring-2 dark:ring-green-700" alt="Avatar">
+              <div class="grow leading-3">
+                <h1 class="text-lg text-gray-700 dark:text-gray-100">
+                  {{ testimonial.name }}
+                </h1>
+                <p v-if="testimonial.position" class="text-xs font-semibold text-gray-400">
+                  {{ testimonial.position }}
+                </p>
+              </div>
+              <div class="flex items-center gap-1 self-end">
+                <a
+                  v-if="testimonial.twitterLink"
+                  :href="testimonial.twitterLink"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  class="p-1 bg-green-300 rounded cursor-pointer hover:bg-green-400 dark:bg-green-800 dark:hover:bg-green-700"
+                >
+                  <XIcon />
+                </a>
+                <a
+                  v-if="testimonial.githubLink"
+                  :href="testimonial.githubLink"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  class="p-1 bg-green-300 rounded cursor-pointer hover:bg-green-400 dark:bg-green-800 dark:hover:bg-green-700"
+                >
+                  <GithubIcon />
+                </a>
+              </div>
             </div>
           </div>
         </div>

diff --git a/.vitepress/theme/components/Landing/Testimonials/data.ts b/.vitepress/theme/components/Landing/Testimonials/data.ts
@@ -33,18 +33,17 @@ export const testimonials: Testimonial[] = [
     twitterLink: 'https://twitter.com/VueSchool_io/status/1603699078151430147',
   },
   {
-    name: 'Nikolas Burk',
-    position: 'PrismaORM',
-    avatar: 'https://avatars.githubusercontent.com/nikolasburk',
-    text: '🤩 This is super exciting: Sidebase is bringing `create-t3-app` to the Vue/Nuxt community!',
-    githubLink: 'https://github.com/nikolasburk',
-    twitterLink: 'https://twitter.com/nikolasburk/status/1605502760052412416',
+    name: 'ineshbose',
+    avatar: 'https://avatars.githubusercontent.com/ineshbose',
+    text: 'Been following this issue/project for a few weeks now - this is fantastic, and also a project extremely close to my interest!',
+    githubLink: 'https://github.com/ineshbose',
   },
   {
-    name: 'anorakio',
-    avatar: 'https://i.imgur.com/bh9c6In.jpeg',
-    text: 'Thanks for sharing! Nice start to explore @nuxt_js 3.',
-    twitterLink: 'https://twitter.com/anorakio/status/1571415138741239808',
+    name: 'Fabian',
+    avatar: 'https://avatars.githubusercontent.com/madebyfabian',
+    text: 'Thank you so much for sharing! Trying to use nuxt 3 on a larger project currently, and struggling a lot in terms of project structure, best practices, which ecosystems & libs to use',
+    githubLink: 'https://github.com/madebyfabian',
+    twitterLink: 'https://twitter.com/madebyfabian/status/1566393943578787840',
   },
   {
     name: 'Criston Mascarenhas',
@@ -54,24 +53,25 @@ export const testimonials: Testimonial[] = [
     twitterLink: 'https://twitter.com/devcriston/status/1615803349332525056'
   },
   {
-    name: 'ineshbose',
-    avatar: 'https://avatars.githubusercontent.com/ineshbose',
-    text: 'Been following this issue/project for a few weeks now - this is fantastic, and also a project extremely close to my interest!',
-    githubLink: 'https://github.com/ineshbose',
+    name: 'Nikolas Burk',
+    position: 'PrismaORM',
+    avatar: 'https://avatars.githubusercontent.com/nikolasburk',
+    text: '🤩 This is super exciting: Sidebase is bringing `create-t3-app` to the Vue/Nuxt community!',
+    githubLink: 'https://github.com/nikolasburk',
+    twitterLink: 'https://twitter.com/nikolasburk/status/1605502760052412416',
   },
   {
-    name: 'Fabian',
-    avatar: 'https://avatars.githubusercontent.com/madebyfabian',
-    text: 'Thank you so much for sharing! Trying to use nuxt 3 on a larger project currently, and struggling a lot in terms of project structure, best practices, which ecosystems & libs to use',
-    githubLink: 'https://github.com/madebyfabian',
-    twitterLink: 'https://twitter.com/madebyfabian/status/1566393943578787840',
+    name: 'anorakio',
+    avatar: 'https://i.imgur.com/bh9c6In.jpeg',
+    text: 'Thanks for sharing! Nice start to explore @nuxt_js 3.',
+    twitterLink: 'https://twitter.com/anorakio/status/1571415138741239808',
   },
   {
     name: 'Dvir Hazout',
     avatar: 'https://i.imgur.com/ajom275.jpeg',
     text: 'You added the missing part for me in nuxt3 to start experiment real world app with the framework',
     twitterLink: 'https://twitter.com/dvir_hazout/status/1588272629500489728',
-  }
+  },
 ]
 
 export default testimonials