feat: Overall Improvement

apps/base/assets/css/base.css

@@ -32,13 +32,16 @@ html, body, #__nuxt, #__layout {
   --font-geist: 'Geist', sans-serif;
   --font-geist-mono: 'Geist Mono', sans-serif;
 
+  --font-sans: 'Geist', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
   --animate-ripple-1: ripple 2.5s var(--ease-smooth) infinite 0.15s;
   --animate-ripple-2: ripple 2.5s var(--ease-smooth) infinite 0.4s;
   --animate-ripple-3: ripple 2.5s var(--ease-smooth) infinite 0.65s;
 }
 
 .main-gradient {
-  @apply font-geist-mono bg-gradient-to-r from-neutral-50 to-neutral-600 to-50% bg-clip-text text-transparent;
+  @apply bg-gradient-to-r from-neutral-50 to-neutral-600 to-50% bg-clip-text text-transparent;
 }
 
 .bg-stripes {

apps/base/components/Blur.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
 const { position = 'top', size = 75 } = defineProps<{
   position: 'top' | 'bottom' | 'both'
   size?: number
 }>()
 
 const blurLevels = [1, 2, 3, 6, 12]
+const bottomOpacity = ref(1)
 
 const positions = {
   top: {
@@ -16,10 +19,34 @@ const positions = {
     gradient: 'gradient-mask-t-0'
   }
 }
+
+const updateBottomOpacity = () => {
+  const windowHeight = window.innerHeight
+  const documentHeight = document.documentElement.scrollHeight
+  const scrollTop = window.scrollY
+
+  const distanceToBottom = documentHeight - (scrollTop + windowHeight)
+
+  const transitionZone = 200
+
+  if (distanceToBottom <= transitionZone) {
+    bottomOpacity.value = distanceToBottom / transitionZone
+  } else {
+    bottomOpacity.value = 1
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', updateBottomOpacity)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', updateBottomOpacity)
+})
 </script>
 
 <template>
-  <div>
+  <div class="pointer-events-none">
     <template v-for="pos in ['top', 'bottom']" :key="pos">
       <div
         v-if="position === pos || position === 'both'"
@@ -31,7 +58,8 @@ const positions = {
           :key="blur"
           :style="{
             '-webkit-backdrop-filter': `blur(${blur}px)`,
-            'backdrop-filter': `blur(${blur}px)`
+            'backdrop-filter': `blur(${blur}px)`,
+            opacity: pos === 'bottom' ? bottomOpacity : 1
           }"
           :class="[
             'absolute inset-0',

apps/base/components/Callout.vue

@@ -8,7 +8,7 @@ const props = defineProps<CalloutProps>()
 
 <template>
   <div class="bg-stripes" :class="props.class ? props.class : 'p-4 sm:p-7'">
-    <CrossedDiv class="p-4 bg-[var(--ui-bg)]">
+    <CrossedDiv class="p-4 size-full bg-[var(--ui-bg)]">
       <slot />
     </CrossedDiv>
   </div>

apps/base/components/CrossedDiv.vue

@@ -8,10 +8,10 @@ defineProps<{
   <div class="relative -mb-px -ml-px">
     <div v-if="line" class="h-0.5 w-[200rem] bg-neutral-100 dark:bg-neutral-800 absolute -left-[100rem] opacity-40" />
     <div v-if="line" class="h-[200rem] w-0.5 bg-neutral-100 dark:bg-neutral-800 absolute -top-[100rem] opacity-40 -left-0.5" />
-    <span class="bottom absolute -bottom-px -left-px size-px" />
-    <span class="bottom absolute -bottom-px -right-px size-px" />
-    <span class="bottom absolute -left-px -top-px size-px" />
-    <span class="bottom absolute -right-px -top-px size-px" />
+    <span class="cross absolute -bottom-px -left-px size-px" />
+    <span class="cross absolute -bottom-px -right-px size-px" />
+    <span class="cross absolute -left-px -top-px size-px" />
+    <span class="cross absolute -right-px -top-px size-px" />
     <div class="relative z-10 flex h-full flex-col justify-center">
       <slot />
     </div>
@@ -21,7 +21,7 @@ defineProps<{
 </template>
 
 <style scoped>
-.bottom:before {
+.cross:before {
   --tw-bg-opacity: 1;
   content: "";
   width: 1px;
@@ -30,7 +30,7 @@ defineProps<{
   top: -4px;
 }
 
-.bottom:after {
+.cross:after {
   --tw-bg-opacity: 1;
   content: "";
   width: 9px;
@@ -40,13 +40,13 @@ defineProps<{
 }
 
 .dark {
-  .bottom:before, .bottom:after {
+  .cross:before, .cross:after {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 }
 
 .light {
-  .bottom:before, .bottom:after {
+  .cross:before, .cross:after {
     background-color: rgb(0 0 0 / var(--tw-bg-opacity));
   }
 }

apps/base/components/Logo.vue

@@ -1,16 +1,69 @@
 <script setup lang="ts">
-const { size = 'size-5', text = true, textSize = 'text-base' } = defineProps<{
+const { size = 'size-6', text = true, textSize = 'text-base' } = defineProps<{
   size?: string
   text?: boolean
   textSize?: string
 }>()
+
+const logo = ref<SVGSVGElement>()
+
+function downloadLogo(svg: string, filename: string) {
+  const blob = new Blob([svg], { type: 'image/svg+xml' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+  toast.success('Logo downloaded successfully')
+}
+
+const items = ref([
+  [
+    {
+      label: 'Copy logo as SVG',
+      icon: 'custom:shelve',
+      onSelect: () => {
+        copyToClipboard(logo.value!.outerHTML, 'Logo copied to clipboard')
+      }
+    },
+    {
+      label: 'Download logo',
+      icon: 'custom:shelve',
+      onSelect: () => {
+        downloadLogo(logo.value!.outerHTML, 'shelve.svg')
+      }
+    }
+  ],
+  [
+    {
+      label: 'Brand Assets',
+      icon: 'i-heroicons-photo',
+      to: '/brand'
+    },
+  ]
+])
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
-    <UIcon name="custom:shelve" :class="size" />
-    <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold" :class="textSize">
-      Shelve
-    </NuxtLink>
-  </div>
+  <UContextMenu
+    :items
+    :ui="{
+      content: 'w-48'
+    }"
+  >
+    <div class="flex items-center font-geist gap-2">
+      <svg ref="logo" xmlns="http://www.w3.org/2000/svg" :class="size" fill="currentColor" viewBox="0 0 717 488">
+        <path
+          d="M700.867 0L577.808 142.717C563.922 158.728 542.573 168.197 519.836 168.197H388.098C379.94 168.197 373.518 162.343 373.518 155.113V110.696C373.518 98.3011 355.814 92.9643 347.309 102.777L182.593 293.698C168.708 309.709 147.359 319.177 124.622 319.177H0L253.583 25.4791C267.468 9.46859 288.817 0 311.554 0H700.867Z"
+        />
+        <path
+          d="M15.4475 487.374L138.507 344.657C152.393 328.646 173.742 319.177 196.479 319.177H328.217C336.375 319.177 342.797 325.031 342.797 332.261V376.678C342.797 389.073 360.501 394.41 369.005 384.597L533.721 193.676C547.607 177.665 568.956 168.197 591.693 168.197H716.141L462.559 461.895C448.673 477.905 427.324 487.374 404.587 487.374H15.4475Z"
+        />
+      </svg>
+      <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold" :class="textSize">
+        Shelve
+      </NuxtLink>
+    </div>
+  </UContextMenu>
 </template>

apps/lp/app/components/landing/ScrambleText.vue → apps/base/components/ScrambleText.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 })
 
 const displayText = ref(props.label)
-const charset = 'abcdefghijklmnopqrstuvwxyz'
+const charset = 'abcdefghijklmnopqrstuvwxyz1234567890'
 
 function randomChars(length: number) {
   return Array.from(
@@ -33,7 +33,7 @@ startScrambling()
 </script>
 
 <template>
-  <span @mouseover="startScrambling">
+  <span class="font-mono" @mouseover="startScrambling">
     {{ displayText }}
   </span>
 </template>

apps/base/utils/navigation.ts

@@ -1,4 +1,4 @@
-type Where = 'home' | 'team' | 'user' | 'admin';
+type Where = 'team' | 'user' | 'admin';
 
 export type Navigation = {
   name: string;
@@ -9,13 +9,6 @@ export type Navigation = {
 
 export function getNavigation(where: Where, teamSlug?: string): Navigation[] {
   switch (where) {
-    case 'home':
-      return [
-        { name: 'Home', path: '/', title: 'Home' },
-        { name: 'Vault', path: '/vault', title: 'Vault' },
-        { name: 'Docs', path: '/getting-started', title: 'Docs' },
-        { name: 'Roadmap', path: '/roadmap', title: 'Roadmap' },
-      ]
     case 'team':
       return [
         {

apps/lp/app/assets/css/index.css

@@ -3,6 +3,7 @@
 
 :root {
   --ui-primary: black;
+
   ::selection {
     color: #282a30;
     background-color: #c8c8c8;
@@ -11,6 +12,7 @@
 
 .dark {
   --ui-primary: white;
+
   ::selection {
     color: #ffffff;
     background-color: #474747;

apps/lp/app/components/Header.vue

@@ -30,15 +30,12 @@ defineShortcuts({
       </NuxtLink>
     </template>
 
-    <UNavigationMenu :items variant="link" />
+    <UContentSearchButton label="Search or ⌘K..." icon="lucide:search" variant="subtle" size="sm" class="w-[300px]" />
 
     <template #right>
-      <UTooltip text="Search" :kbds="['meta', 'K']">
-        <UContentSearchButton />
-      </UTooltip>
-
       <UButton label="Get Started" size="xs" to="https://app.shelve.cloud" />
 
+      <UContentSearchButton class="lg:hidden" />
 
       <UTooltip text="Open on GitHub" :kbds="['meta', 'G']" class="hidden lg:flex">
         <UButton
@@ -72,6 +69,5 @@ defineShortcuts({
 
 <style>
 :root {
-  --ui-header-height: 45px;
 }
 </style>

apps/lp/app/components/landing/Faq.vue

@@ -13,10 +13,6 @@ const items = [
     label: 'Can I self-host Shelve?',
     content: 'Absolutely! Shelve can be [self-hosted using Docker](/docker) or with one-click using [Coolify](/coolify). Self-hosting gives you full control over your data and infrastructure.',
   },
-  {
-    label: 'How does Shelve handle monorepos?',
-    content: 'Shelve has native support for [monorepos](/cli#monorepo-support). It automatically detects the root of your monorepo and manages configurations across all your projects, making it perfect for large-scale applications.',
-  },
   {
     label: 'Does Shelve integrate with other tools?',
     content: 'Yes! Shelve currently integrates with GitHub for secrets management, with more integrations planned. You can sync your environment variables directly with [GitHub Secrets](/integrations/github).',
@@ -31,16 +27,16 @@ const items = [
   },
   {
     label: 'How can I get support?',
-    content: 'For technical support, you can open an issue on [GitHub](https://git.new/shelve) or reach out via email at [email protected]. We also maintain detailed documentation at docs.shelve.cloud.',
+    content: 'For technical support, you can open an issue on [GitHub](https://git.new/shelve) or reach out via email at [email protected].',
   }
 ]
 </script>
 
 <template>
   <div id="faq">
-    <div class="mb-10 flex flex-col items-center justify-center gap-2">
+    <div class="mb-10 flex italic flex-col items-center justify-center gap-2">
       <h3 class="main-gradient text-3xl">
-        <LandingScrambleText label="FAQ" />
+        <ScrambleText label="FAQ" />
       </h3>
       <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
         Frequently asked questions about Shelve. If you have a question that is not answered here, feel free to contact us.

apps/lp/app/components/landing/Features.vue

@@ -41,9 +41,9 @@ const features = [
 
 <template>
   <div>
-    <div class="mb-10 flex flex-col items-center justify-center gap-2">
-      <h3 class="main-gradient text-3xl">
-        <LandingScrambleText label="Features" />
+    <div class="mb-10 flex flex-col italic items-center justify-center gap-2">
+      <h3 class="main-gradient  text-3xl">
+        <ScrambleText label="Features" />
       </h3>
       <p class="max-w-lg text-pretty text-center text-sm text-neutral-500 sm:text-base">
         Shelve is packed with features that make managing your environment variables a breeze. Here are some of the highlights.

apps/lp/app/components/landing/Stats.vue

@@ -58,7 +58,7 @@ const finalStats = computed(() => [
   <div>
     <ClientOnly>
       <Teleport defer to="#visitors">
-        <div class="fixed bottom-5 right-5 z-[999]  text-neutral-500 text-xs flex gap-2 items-center">
+        <div class="fixed z-[999]  text-neutral-500 text-xs flex gap-2 items-center justify-center bottom-2 left-0 w-full">
           <span class="relative flex size-2">
             <span
               class="absolute bg-green-50 inline-flex size-full animate-ping rounded-full opacity-75"
@@ -82,7 +82,7 @@ const finalStats = computed(() => [
 
     <div class="mb-10 flex flex-col gap-2">
       <h3 class="main-gradient italic text-3xl leading-8">
-        <LandingScrambleText label="Built for speed" />
+        <ScrambleText label="Built for speed" />
       </h3>
       <p class="flex gap-2 italic items-center text-pretty text-center text-neutral-500">
         {{ !isLoading ? ' Stats are updated in real-time.' : `Loading stats${loadingDots}` }}