docs: restore landing page

.gitignore

@@ -60,4 +60,6 @@ Temporary Items
 .apdisk
 
 test/fixtures/basic/.data
-playground/.data
+playground/.data
+.vercel
+.env*.local

.vercelignore

@@ -0,0 +1,7 @@
+.nuxt
+.output
+.vercel/output
+docs/.nuxt
+docs/.output
+docs/.vercel
+node_modules/.cache/nuxt

docs/app/assets/css/main.css

@@ -55,11 +55,19 @@ pre, code {
 
 /* Code preview styling */
 .code-preview {
-  background: linear-gradient(to top right, var(--color-stone-100), var(--color-stone-200));
+  background: #1b1917;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 16px 36px rgba(28, 25, 23, 0.18);
 }
 
 .dark .code-preview {
-  background: linear-gradient(to top right, rgba(28, 25, 23, 0.9), rgba(0, 0, 0, 0.9));
+  background: #181716;
+  border-color: rgba(255, 255, 255, 0.14);
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36);
+}
+
+.editor-toolbar {
+  background: rgba(255, 255, 255, 0.035);
 }
 
 /* Traffic lights for code preview */
@@ -91,9 +99,13 @@ pre, code {
   border: none !important;
   padding: 0 !important;
   margin: 0 !important;
+  color: #f7f2ec;
   font-size: 0.75rem;
   border-radius: 0 !important;
   line-height: 1.5rem !important;
+  min-width: max-content;
+  padding-right: 1rem !important;
+  text-align: left;
 }
 
 @media (min-width: 640px) {
@@ -106,7 +118,8 @@ pre, code {
   background: transparent !important;
 }
 
-.hero-code .shiki {
+.hero-code .shiki,
+.hero-code .shiki span {
   background: transparent !important;
 }
 

docs/app/components/app/AppHeader.vue

@@ -3,6 +3,7 @@ const appConfig = useAppConfig()
 const site = useSiteConfig()
 const route = useRoute()
 const { sidebarOpen, toggle: toggleSidebar } = useDocusSidebar()
+const { open: searchOpen } = useContentSearch()
 
 const isDocsPage = computed(() => route.path.startsWith('/getting-started')
   || route.path.startsWith('/core-concepts')
@@ -19,15 +20,15 @@ const navLinks = [
 </script>
 
 <template>
-  <UHeader :ui="{ container: 'max-w-full !px-0 h-14', root: 'border-b border-[var(--ui-border)] h-14', left: 'gap-0 h-full', right: 'gap-0 h-full', title: 'h-full items-center' }" to="/" :title="appConfig.header?.title || site.name">
+  <UHeader :ui="{ container: 'max-w-full !gap-0 !px-0 h-14 overflow-hidden', root: 'border-b border-[var(--ui-border)] h-14', left: 'gap-0 h-full', right: 'gap-0 h-full', title: 'h-full items-center' }" to="/" :title="appConfig.header?.title || site.name">
     <template #title>
       <div class="header-logo">
         <!-- Nuxt -->
         <div class="flex items-center gap-1.5">
           <svg width="48" height="32" viewBox="0 0 48 32" fill="none" class="h-4 w-auto" xmlns="http://www.w3.org/2000/svg">
             <path d="M26.88 32H44.64C45.2068 32.0001 45.7492 31.8009 46.24 31.52C46.7308 31.2391 47.2367 30.8865 47.52 30.4C47.8033 29.9135 48.0002 29.3615 48 28.7998C47.9998 28.2381 47.8037 27.6864 47.52 27.2001L35.52 6.56C35.2368 6.0736 34.8907 5.72084 34.4 5.44C33.9093 5.15916 33.2066 4.96 32.64 4.96C32.0734 4.96 31.5307 5.15916 31.04 5.44C30.5493 5.72084 30.2032 6.0736 29.92 6.56L26.88 11.84L20.8 1.59962C20.5165 1.11326 20.1708 0.600786 19.68 0.32C19.1892 0.0392139 18.6467 0 18.08 0C17.5133 0 16.9708 0.0392139 16.48 0.32C15.9892 0.600786 15.4835 1.11326 15.2 1.59962L0.32 27.2001C0.0363166 27.6864 0.000246899 28.2381 3.05588e-07 28.7998C-0.000246288 29.3615 0.0367437 29.9134 0.32 30.3999C0.603256 30.8864 1.10919 31.2391 1.6 31.52C2.09081 31.8009 2.63324 32.0001 3.2 32H14.4C18.8379 32 22.068 30.0092 24.32 26.24L29.76 16.8L32.64 11.84L41.44 26.88H29.76L26.88 32ZM14.24 26.88H6.4L18.08 6.72L24 16.8L20.0786 23.636C18.5831 26.0816 16.878 26.88 14.24 26.88Z" class="fill-black dark:fill-white" />
           </svg>
-          <span class="font-semibold text-sm select-none">Nuxt</span>
+          <span class="hidden font-semibold text-sm select-none sm:inline">Nuxt</span>
         </div>
         <!-- X separator -->
         <span class="text-black/40 dark:text-white/40 text-sm select-none">×</span>
@@ -36,7 +37,7 @@ const navLinks = [
           <svg width="60" height="45" viewBox="0 0 60 45" fill="none" class="h-4 w-auto" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z" class="fill-black dark:fill-white" />
           </svg>
-          <span class="font-semibold text-sm select-none">Better Auth</span>
+          <span class="hidden font-semibold text-sm select-none sm:inline">Better Auth</span>
         </div>
       </div>
     </template>
@@ -76,14 +77,22 @@ const navLinks = [
       </nav>
 
       <!-- Docs sidebar toggle (mobile) -->
-      <UButton v-if="isDocsPage" color="neutral" variant="ghost" :icon="sidebarOpen ? 'i-lucide-x' : 'i-lucide-panel-left'" class="lg:hidden border-l border-[var(--ui-border)] h-full aspect-square rounded-none" @click="toggleSidebar" />
+      <UButton v-if="isDocsPage" color="neutral" variant="ghost" :icon="sidebarOpen ? 'i-lucide-x' : 'i-lucide-panel-left'" class="mobile-header-action lg:hidden" :ui="{ leadingIcon: 'mobile-header-icon' }" @click="toggleSidebar" />
 
-      <UContentSearchButton class="lg:hidden" />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-search"
+        aria-label="Search documentation"
+        class="mobile-header-action lg:hidden"
+        :ui="{ leadingIcon: 'mobile-header-icon' }"
+        @click="searchOpen = true"
+      />
 
       <ClientOnly>
-        <UColorModeButton class="flex items-center justify-center border-l border-[var(--ui-border)] h-full aspect-square rounded-none text-muted hover:text-[var(--ui-text)] transition-colors" :ui="{ leadingIcon: 'size-4' }" />
+        <UColorModeButton class="mobile-header-action text-muted hover:text-[var(--ui-text)]" :ui="{ leadingIcon: 'mobile-header-icon' }" />
         <template #fallback>
-          <div class="h-full aspect-square animate-pulse bg-[var(--ui-bg-elevated)] border-l border-[var(--ui-border)]" />
+          <div class="mobile-header-action animate-pulse bg-[var(--ui-bg-elevated)]" />
         </template>
       </ClientOnly>
     </template>
@@ -93,7 +102,8 @@ const navLinks = [
         color="neutral"
         variant="ghost"
         :icon="open ? 'i-lucide-x' : 'i-lucide-menu'"
-        class="lg:hidden"
+        class="mobile-header-action lg:hidden"
+        :ui="{ leadingIcon: 'mobile-header-icon' }"
         @click="toggle"
       />
     </template>
@@ -119,17 +129,63 @@ const navLinks = [
 .header-logo {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  width: var(--fd-sidebar-width, 268px);
+  gap: 0.625rem;
+  width: 8.25rem;
   height: 100%;
-  padding-inline: 1.25rem;
+  padding-inline: 1rem;
   border-right: 1px solid var(--ui-border);
   box-sizing: border-box;
 }
 
+@media (min-width: 640px) {
+  .header-logo {
+    gap: 0.75rem;
+    width: var(--fd-sidebar-width, 268px);
+    padding-inline: 1.25rem;
+  }
+}
+
 @media (min-width: 1280px) {
   .header-logo {
     width: 286px;
   }
 }
+
+:deep(.mobile-header-action) {
+  display: grid !important;
+  place-items: center !important;
+  flex: 0 0 3.5rem;
+  width: 3.5rem !important;
+  min-width: 3.5rem !important;
+  height: 3.5rem !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  gap: 0 !important;
+  color: var(--ui-text-muted);
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+:deep(.mobile-header-action .mobile-header-icon),
+:deep(.mobile-header-action > span),
+:deep(.mobile-header-action > svg) {
+  display: block;
+  width: 1.375rem;
+  height: 1.375rem;
+  margin: 0;
+  flex: none;
+}
+
+:deep(.mobile-header-action:hover) {
+  color: var(--ui-text);
+  background: color-mix(in srgb, var(--ui-bg-elevated) 70%, transparent);
+}
+
+:deep(.mobile-header-action:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+:deep(.mobile-header-action + .mobile-header-action) {
+  border-left: 1px solid var(--ui-border);
+}
 </style>

docs/app/components/content/landing/LandingFeatures.vue

@@ -6,13 +6,13 @@ const items = features.items as { title: string, description: string, icon: stri
 </script>
 
 <template>
-  <section class="relative">
+  <section class="relative overflow-x-hidden">
     <!-- Vertical lines on sides (matching hero) -->
     <div class="hidden absolute top-0 left-5 w-px h-full bg-stone-200 dark:bg-[#26242C] pointer-events-none lg:block lg:left-16 xl:left-16" />
     <div class="hidden absolute top-0 right-5 w-px h-full bg-stone-200 dark:bg-[#26242C] pointer-events-none lg:block lg:right-14 xl:right-14" />
 
-    <div class="md:w-10/12 mt-10 mx-auto relative md:border-l-0 md:border-b-0 border-thin border-stone-200 dark:border-stone-800 dark:bg-black/[0.95]">
-      <div class="w-full md:mx-0">
+    <div class="md:w-10/12 mt-10 mx-auto relative min-w-0 border-thin border-stone-200 bg-white/70 ring-1 ring-black/[0.02] dark:border-stone-800 dark:bg-black/[0.95] dark:ring-white/[0.03] md:border-l-0 md:border-b-0">
+      <div class="w-full min-w-0 md:mx-0">
         <!-- Features Grid -->
         <div class="grid grid-cols-1 relative md:grid-rows-2 md:grid-cols-3 border-b-thin border-stone-200 dark:border-stone-800">
           <!-- Plus decorators at grid intersections -->
@@ -25,19 +25,19 @@ const items = features.items as { title: string, description: string, icon: stri
           <div
             v-for="(feature, index) in items"
             :key="feature.title"
-            class="justify-center md:border-l-thin border-stone-200 dark:border-stone-800 md:min-h-[240px] border-t-thin md:border-t-0 transform-gpu flex flex-col p-10 2xl:p-12"
+            class="justify-center min-w-0 md:border-l-thin border-stone-200 dark:border-stone-800 md:min-h-[240px] border-t-thin md:border-t-0 transform-gpu flex flex-col p-8 transition-colors hover:bg-stone-50/70 dark:hover:bg-white/[0.02] md:p-10 2xl:p-12"
             :class="{ 'md:border-t-thin': index >= 3 }"
           >
             <div class="flex items-center gap-2 my-1">
-              <UIcon :name="feature.icon" class="size-4" />
-              <p class="text-stone-600 dark:text-stone-400">
+              <UIcon :name="feature.icon" class="size-4 text-stone-700 dark:text-stone-300" />
+              <p class="text-stone-700 dark:text-stone-300">
                 {{ feature.title }}
               </p>
             </div>
             <div class="mt-2">
-              <p class="mt-2 text-sm text-left text-muted">
+              <p class="mt-2 text-sm leading-6 text-left text-stone-600 dark:text-stone-400">
                 {{ feature.description }}
-                <NuxtLink class="underline" to="/getting-started/installation">
+                <NuxtLink class="underline decoration-stone-300 underline-offset-2 transition-colors hover:text-stone-950 hover:decoration-stone-600 dark:decoration-stone-700 dark:hover:text-white dark:hover:decoration-stone-300" to="/getting-started/installation">
                   Learn more
                 </NuxtLink>
               </p>
@@ -47,23 +47,23 @@ const items = features.items as { title: string, description: string, icon: stri
 
         <!-- CTA Section (no top border - grid above has bottom border) -->
         <div class="relative col-span-3 md:border-l-thin border-stone-200 dark:border-stone-800 h-full py-20">
-          <div class="w-full h-full p-16 pt-10 md:px-10 2xl:px-16">
-            <div class="flex flex-col items-center justify-center w-full h-full gap-3">
-              <div class="flex items-center gap-2">
+          <div class="w-full h-full px-6 py-10 md:px-10 2xl:px-16">
+            <div class="flex flex-col items-start justify-center w-full h-full gap-3 md:items-center">
+              <div class="flex items-center justify-start gap-2 md:justify-center">
                 <UIcon name="i-lucide-globe" class="size-4" />
                 <p class="text-stone-600 dark:text-stone-400">
                   Nuxt + Better Auth
                 </p>
               </div>
-              <p class="max-w-md mx-auto mt-4 text-4xl font-normal tracking-tighter text-center md:text-4xl">
+              <p class="max-w-md mt-4 text-4xl font-normal tracking-tighter text-left md:mx-auto md:text-center md:text-4xl">
                 <strong>Set up authentication in minutes, not hours!</strong>
               </p>
-              <div class="flex mt-4 z-20 justify-center items-center gap-4">
-                <UButton to="/getting-started/installation" size="lg">
+              <div class="flex flex-wrap mt-4 z-20 justify-start items-center gap-4 md:justify-center">
+                <UButton to="/getting-started/installation" size="lg" class="ring-1 ring-black/10">
                   Get Started
                   <UIcon name="i-lucide-arrow-right" class="size-4" />
                 </UButton>
-                <UButton to="https://www.better-auth.com/docs" target="_blank" color="neutral" variant="outline" size="lg">
+                <UButton to="https://www.better-auth.com/docs" target="_blank" color="neutral" variant="outline" size="lg" class="bg-white/40 dark:bg-white/[0.03]">
                   Better Auth Docs
                 </UButton>
               </div>