enhance hero

apps/base/app.config.ts

@@ -1,6 +1,7 @@
 export default defineAppConfig({
   ui: {
     colors: {
+      primary: 'blue',
       neutral: 'neutral',
     },
     button: {

apps/base/assets/css/base.css

@@ -30,3 +30,24 @@ html, body, #__nuxt, #__layout {
 .main-gradient {
   @apply font-geist-mono bg-gradient-to-r from-neutral-50 to-neutral-600 to-50% bg-clip-text text-transparent;
 }
+
+.bg-stripes {
+  @apply w-full [background-size:4px_4px] opacity-75;
+  @apply dark:[background-image:linear-gradient(-45deg,var(--color-neutral-700)_12.50%,transparent_12.50%,transparent_50%,var(--color-neutral-700)_50%,var(--color-neutral-700)_62.50%,transparent_62.50%,transparent_100%)];
+  @apply not-dark:[background-image:linear-gradient(-45deg,var(--color-neutral-200)_12.50%,transparent_12.50%,transparent_50%,var(--color-neutral-200)_50%,var(--color-neutral-200)_62.50%,transparent_62.50%,transparent_100%)];
+}
+
+.bg-dotted {
+  background-image:
+    radial-gradient(transparent, Canvas),
+    radial-gradient(
+      color-mix(in oklch, Canvastext 33%, Canvas) 0.8px,
+      transparent 1.3px
+    );
+  background-size:
+    200px 200px,
+    40px 40px;
+  background-repeat:
+    round,
+    space;
+}

apps/base/components/CrossedDiv.vue

@@ -23,7 +23,6 @@ defineProps<{
 <style scoped>
 .bottom:before {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   content: "";
   width: 1px;
   height: 9px;
@@ -33,14 +32,25 @@ defineProps<{
 
 .bottom:after {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   content: "";
   width: 9px;
   height: 1px;
   position: absolute;
   left: -4px;
 }
 
+.dark {
+  .bottom:before, .bottom:after {
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+}
+
+.light {
+  .bottom:before, .bottom:after {
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  }
+}
+
 .encryption {
   --x: 80%;
   --y: 0%;

apps/base/components/Logo.vue

@@ -7,7 +7,7 @@ const { size = 'size-5', text = true } = defineProps<{
 
 <template>
   <div class="flex items-center gap-2">
-    <UIcon name="custom:shelve" :size />
+    <UIcon name="custom:shelve" :class="size" />
     <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold">
       Shelve
     </NuxtLink>

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

@@ -10,8 +10,11 @@ defineShortcuts({
 </script>
 
 <template>
-  <div class="z-20 h-96 w-full sm:p-0 p-5 relative overflow-hidden">
-    <div class="mx-auto mt-32 w-full max-w-2xl">
+  <div class="z-20 h-[400px] w-full bg-dotted sm:p-0 p-5 relative flex items-center justify-center overflow-hidden">
+    <div flex="flex flex-col items-center justify-center gap-4">
+      <div class="flex items-center justify-center">
+        <Logo :text="false" size="size-10" />
+      </div>
       <div class="mx-auto max-w-md text-pretty text-center text-3xl sm:text-4xl">
         The all-in-one developer <span class="font-newsreader font-light italic">workspace</span>
       </div>
@@ -32,6 +35,6 @@ defineShortcuts({
       </div>
     </div>
 
-    <div class="size-60 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 absolute bottom-0 left-0 right-0 mx-auto -mb-40 blur-[200px] -z-1" />
+    <div class="size-60 rounded-full bg-gradient-to-br from-neutral-500 to-neutral-600 absolute bottom-0 left-0 right-0 mx-auto -mb-40 blur-[200px] -z-1" />
   </div>
 </template>

apps/lp/app/components/layout/Navbar.vue

@@ -41,6 +41,7 @@ items.push(githubItem)
         <Logo size="size-8" />
         <div class="flex items-center">
           <UNavigationMenu
+            color="neutral"
             :items
             class="hidden sm:flex"
             :ui="{ link: 'py-1 px-3' }"

apps/shelve/app/components/Callout.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+type CalloutProps = {
+  class?: string
+}
+
+const props = defineProps<CalloutProps>()
+</script>
+
+<template>
+  <div class="bg-stripes" :class="props.class ? props.class : 'p-4 sm:p-7'">
+    <CrossedDiv class="p-4 bg-[var(--ui-bg)]">
+      <slot />
+    </CrossedDiv>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/shelve/app/components/team/Manager.vue

@@ -49,7 +49,7 @@ const groups = computed(() => [
           {{ currentTeam.name }}
         </span>
       </span>
-      <span><UIcon name="lucide:grip" class="size-4" /></span>
+      <span><UIcon name="lucide:chevrons-up-down" class="size-4" /></span>
     </button>
     <template #content>
       <UCommandPalette