Skip to content

Commit 82bfc22

Browse files
zoey-kaiserzoey-kaiser
authored
feat: testimonials and stack section to the landing page (#192)
1 parent eac5610 commit 82bfc22

40 files changed

+547
-66
lines changed

‎.vitepress/config.mts

-4
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,6 @@ export default defineConfig({
3131
{ icon: 'x', link: 'https://twitter.com/sidebase_io' },
3232
{ icon: 'discord', link: 'https://discord.gg/VzABbVsqAc' },
3333
],
34-
footer: {
35-
message: 'Released under the MIT License.',
36-
copyright: 'Developed by SIDESTREAM',
37-
},
3834
search: {
3935
provider: 'local',
4036
},

‎.vitepress/theme/Layout.vue

+53-8
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@
22
import DefaultTheme from 'vitepress/theme'
33
44
import Banner from './components/Banner.vue'
5-
import Terminal from './components/Terminal/Terminal.vue'
5+
import Terminal from './components/Landing/Terminal/Terminal.vue'
66
import SpinningGradient from './components/SpinningGradient.vue'
7-
// import GithubStarsButton from './components/GithubStarsButton.vue'
7+
import GithubFollowButton from './components/GithubFollowButton.vue'
8+
9+
import StackSection from './components/Landing/Stack/Section.vue'
10+
import TestimonialsSection from './components/Landing/Testimonials/Section.vue'
11+
import FAQSection from './components/Landing/FAQ/Section.vue'
12+
import CustomDevelopmentSection from './components/Landing/CustomDevelopment.vue'
13+
import DocAd from './components/DocAd.vue'
14+
15+
import Footer from './components/Landing/Footer.vue'
816
917
const { Layout } = DefaultTheme
1018
1119
// Banner Configuration
12-
const isBannerEnabled = true
20+
const isBannerEnabled = false
1321
const bannerConfig = {
14-
// Leave text empty to disable the banner
1522
text: '✨ NuxtAuth v0.8.0 has been released! ✨',
1623
button: {
1724
href: 'https://github.com/sidebase/nuxt-auth/releases/tag/0.8.0',
@@ -22,19 +29,57 @@ const bannerConfig = {
2229

2330
<template>
2431
<Layout>
25-
<!--
2632
<template #nav-bar-content-after>
27-
<GithubStarsButton owner="sidebase" repo="sidebase" />
33+
<GithubFollowButton user="sidebase" />
2834
</template>
29-
-->
3035

3136
<template #home-hero-image>
3237
<Terminal />
3338
</template>
3439

3540
<template #home-hero-before>
3641
<Banner v-if="isBannerEnabled" v-bind="bannerConfig" />
37-
<SpinningGradient />
42+
<SpinningGradient class="pt-4" />
43+
</template>
44+
45+
<template #home-features-after>
46+
<div class="relative PageContainer">
47+
<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">
48+
<div class="container relative mx-auto space-y-24">
49+
<StackSection />
50+
<TestimonialsSection />
51+
<FAQSection />
52+
<CustomDevelopmentSection />
53+
</div>
54+
</div>
55+
<Footer class="mt-10" />
56+
</template>
57+
58+
<template #doc-after>
59+
<div class="pt-6">
60+
<DocAd />
61+
</div>
3862
</template>
3963
</Layout>
4064
</template>
65+
66+
<style scoped>
67+
.PageContainer {
68+
position: relative;
69+
padding: 0 24px;
70+
}
71+
@media (min-width: 640px) {
72+
.PageContainer {
73+
padding: 0 48px;
74+
}
75+
}
76+
@media (min-width: 960px) {
77+
.PageContainer {
78+
padding: 0 64px;
79+
}
80+
}
81+
.container {
82+
margin: 0 auto;
83+
max-width: 1152px;
84+
}
85+
</style>

‎.vitepress/theme/components/DocAd.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<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">
3+
<img class="absolute top-0 right-0 opacity-30 h-full py-7 px-5 pointer-events-none" src="/sidestream.svg">
4+
<h2 class="relative font-bold tracking-tight">
5+
In need of a consultant?
6+
</h2>
7+
<p class="relative text-sm">
8+
Reach out and we can arrange a call!
9+
</p>
10+
<div class="relative mt-4 flex flex-col items-start gap-y-2">
11+
<a
12+
href="mailto:[email protected]"
13+
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"
14+
>
15+
Send us an email!
16+
</a>
17+
</div>
18+
<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">
19+
<circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7" />
20+
<defs>
21+
<radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
22+
<stop stop-color="#7775D6" />
23+
<stop offset="1" stop-color="#E935C1" />
24+
</radialGradient>
25+
</defs>
26+
</svg>
27+
</div>
28+
</template>

‎.vitepress/theme/components/GithubStarsButton.vue renamed to ‎.vitepress/theme/components/GithubFollowButton.vue

+6-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
<script lang="ts" setup>
22
import { onMounted, ref } from 'vue'
3-
import StarIcon from './StarIcon.vue'
43
5-
const props = defineProps<{
6-
owner: string
7-
repo: string
8-
}>()
4+
const props = defineProps<{ user: string }>()
95
106
const count = ref(0)
117
128
async function fetchCount() {
13-
const res = await fetch(`https://api.github.com/repos/${props.owner}/${props.repo}`)
9+
const res = await fetch(`https://api.github.com/users/${props.user}`)
1410
const resJson = await res.json()
15-
count.value = resJson.stargazers_count ?? 0
11+
count.value = resJson.followers ?? 0
1612
}
1713
onMounted(fetchCount)
1814
</script>
@@ -22,16 +18,15 @@ onMounted(fetchCount)
2218
<a
2319
title="Github"
2420
class="Button"
25-
:href="`https://github.com/${owner}/${repo}`"
21+
:href="`https://github.com/${user}`"
2622
target="_blank"
2723
rel="noreferrer noopener"
2824
>
29-
<StarIcon />
30-
Star
25+
Follow
3126
</a>
3227
<a
3328
class="Count"
34-
:href="`https://github.com/${owner}/${repo}/stargazers`"
29+
:href="`https://github.com/${user}`"
3530
aria-label="{label}"
3631
target="_blank"
3732
rel="noreferrer noopener"

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<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">
3+
<img class="absolute top-0 right-0 opacity-15 dark:opacity-30 h-full py-12 px-10 pointer-events-none" src="/sidestream.svg">
4+
5+
<h2 class="relative max-w-2xl text-2xl font-bold tracking-tight md:text-4xl">
6+
In need of a consultant?
7+
</h2>
8+
<p class="relative max-w-xl md:text-lg leading-8">
9+
Reach out and we can arrange a call!
10+
</p>
11+
<div class="relative mt-5 flex items-center gap-x-6">
12+
<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">
13+
Send us an email!
14+
</a>
15+
<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>
16+
</div>
17+
<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">
18+
<circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7" />
19+
<defs>
20+
<radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
21+
<stop stop-color="#7775D6" />
22+
<stop offset="1" stop-color="#E935C1" />
23+
</radialGradient>
24+
</defs>
25+
</svg>
26+
</div>
27+
</template>

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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
4+
defineProps<{ item: { question: string, answer: string } }>()
5+
6+
const isOpen = ref(false)
7+
</script>
8+
9+
<template>
10+
<div class="pt-6">
11+
<dt>
12+
<button
13+
class="flex w-full items-start justify-between text-left"
14+
:class="{
15+
'text-gray-500 dark:text-gray-400': !isOpen,
16+
'text-gray-900 dark:text-white': isOpen,
17+
}"
18+
@click="isOpen = !isOpen"
19+
>
20+
<span class="text-base font-semibold leading-7">
21+
{{ item.question }}
22+
</span>
23+
<span class="ml-6 flex h-7 items-center">
24+
<span v-if="!isOpen" class="h-6 w-6"> + </span>
25+
<span v-else class="h-6 w-6"> - </span>
26+
</span>
27+
</button>
28+
</dt>
29+
<p
30+
v-if="isOpen"
31+
class="mt-1 text-base leading-7 text-gray-600 dark:text-gray-300"
32+
>
33+
{{ item.answer }}
34+
</p>
35+
</div>
36+
</template>

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup>
2+
import Item from './Item.vue'
3+
4+
const faqs = [
5+
{
6+
question: 'What is the difference between sidebase and NuxtAuth?',
7+
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!',
8+
},
9+
{
10+
question: 'How do I build my app? ',
11+
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.`,
12+
},
13+
{
14+
question: 'Why is TypeScript required?',
15+
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.`,
16+
},
17+
{
18+
question: 'What coding setup can you recommend? ',
19+
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!'
20+
},
21+
{
22+
question: 'Can I contribute to sidebase?',
23+
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!'
24+
}
25+
]
26+
</script>
27+
28+
<template>
29+
<div>
30+
<h1 class="text-3xl font-semibold">
31+
Do you still have questions?
32+
</h1>
33+
<p class="text-lg">
34+
Here are some frequently asked questions about sidebase
35+
</p>
36+
37+
<dl class="mt-8 space-y-6 divide-y divide-gray-900/10 dark:divide-white/10">
38+
<Item v-for="faq in faqs" :key="faq.question" :item="faq" />
39+
</dl>
40+
</div>
41+
</template>

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts" setup>
2+
import GithubIcon from './Icons/Github.vue'
3+
import XIcon from './Icons/X.vue'
4+
</script>
5+
6+
<template>
7+
<footer class="border-t border-zinc-100 dark:border-zinc-800">
8+
<div class="mx-auto max-w-7xl py-6 md:flex md:items-center md:justify-between">
9+
<div class="flex items-center justify-center space-x-5 md:order-2">
10+
<a href="https://github.com/sidebase" target="_blank">
11+
<span class="sr-only">Github</span>
12+
<GithubIcon />
13+
</a>
14+
<a href="https://x.com/sidebase_io" target="_blank">
15+
<span class="sr-only">X or Twitter</span>
16+
<XIcon />
17+
</a>
18+
<p class="opacity-30">
19+
|
20+
</p>
21+
<a href="https://www.sidestream.tech/en/imprint" target="_blank" class="text-sm hover:text-zinc-500 dark:hover:text-white">
22+
Imprint
23+
</a>
24+
<a href="https://www.sidestream.tech/jobs" target="_blank" class="text-sm hover:text-zinc-500 dark:hover:text-white">
25+
Jobs
26+
</a>
27+
</div>
28+
<div class="text-center md:text-start mt-8 text-zinc-600 dark:text-zinc-400 text-sm md:order-1 md:mt-0">
29+
<p>
30+
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.
31+
</p>
32+
</div>
33+
</div>
34+
</footer>
35+
</template>

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<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" />
4+
</svg>
5+
</template>

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
3+
<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" />
4+
</svg>
5+
</template>

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts" setup>
2+
import type { StackItem } from './data'
3+
4+
defineProps<{ item: StackItem }>()
5+
</script>
6+
7+
<template>
8+
<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">
9+
<div class="flex justify-between items-center gap-2 p-4 bg-green-500/30 dark:bg-green-800/30">
10+
<div class="flex items-center gap-2">
11+
<img v-if="typeof item.logoPath === 'string'" :src="item.logoPath" class="size-8">
12+
<template v-else>
13+
<img :src="item.logoPath.light" class="size-8 dark:hidden">
14+
<img :src="item.logoPath.dark" class="size-8 hidden dark:block">
15+
</template>
16+
<h1 class="text-xl font-semibold">
17+
{{ item.name }}
18+
</h1>
19+
</div>
20+
</div>
21+
22+
<div class="p-4 text-sm">
23+
{{ item.description }}
24+
</div>
25+
</div>
26+
</template>

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts" setup>
2+
import Card from './Card.vue'
3+
4+
import { stackItems } from './data'
5+
</script>
6+
7+
<template>
8+
<div>
9+
<div class="relative grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
10+
<Card
11+
v-for="item in stackItems"
12+
:key="item.name"
13+
:item="item"
14+
/>
15+
</div>
16+
</div>
17+
</template>

0 commit comments

Comments
 (0)