fix: improve landing page code preview UI and animations

Author: onmax

docs/app/assets/css/main.css

@@ -88,9 +88,12 @@ pre, code {
 /* Hero code block styling */
 .hero-code pre {
   background: transparent !important;
-  padding: 0.5rem 1rem;
-  margin: 0;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
   font-size: 0.75rem;
+  border-radius: 0 !important;
+  line-height: 1.5rem !important;
 }
 
 @media (min-width: 640px) {
@@ -106,3 +109,13 @@ pre, code {
 .hero-code .shiki {
   background: transparent !important;
 }
+
+/* Hide MDC's copy button in hero */
+.hero-code .group > button {
+  display: none !important;
+}
+
+/* Remove wrapper margin */
+.hero-code > div > div {
+  margin: 0 !important;
+}

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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useClipboard, useElementSize } from '@vueuse/core'
+import { useElementSize } from '@vueuse/core'
 import { AnimatePresence, motion, MotionConfig } from 'motion-v'
 // @ts-expect-error yaml is not typed
 import hero from './hero.yml'
 
 const currentTab = ref(0)
 const contentRef = ref<HTMLElement | null>(null)
 const { height } = useElementSize(contentRef)
-const { copy, copied } = useClipboard()
 
 const tabs = hero.tabs as { name: string, code: string }[]
 
@@ -133,10 +132,10 @@ function getCodeBlock(tab: { name: string, code: string }) {
             <div class="from-stone-300 via-stone-300/70 to-blue-300 absolute inset-0 rounded-none bg-gradient-to-tr opacity-0 dark:opacity-5" />
 
             <!-- Code Preview Card -->
-            <MotionConfig :transition="{ duration: 0.5, type: 'spring', bounce: 0 }">
+            <MotionConfig :transition="{ duration: 0.3, ease: 'easeInOut' }">
               <motion.div
                 :animate="{ height: height > 0 ? height : undefined }"
-                class="code-preview relative overflow-hidden rounded-sm ring-1 ring-white/10 backdrop-blur-lg"
+                class="code-preview relative overflow-hidden rounded-sm backdrop-blur-lg"
               >
                 <div ref="contentRef">
                   <div class="absolute -top-px left-0 right-0 h-px" />
@@ -168,43 +167,29 @@ function getCodeBlock(tab: { name: string, code: string }) {
                     </div>
 
                     <!-- Code content area -->
-                    <div class="flex flex-col items-start px-1 text-sm">
-                      <!-- Copy button (top-right) -->
-                      <div class="absolute top-2 right-4">
-                        <UButton
-                          variant="outline"
-                          size="xs"
-                          class="border-none bg-transparent size-5"
-                          :aria-label="copied ? 'Copied' : 'Copy code'"
-                          @click="copy(currentCode)"
-                        >
-                          <UIcon :name="copied ? 'i-lucide-check' : 'i-lucide-copy'" class="size-3" />
-                          <span class="sr-only">Copy code</span>
-                        </UButton>
-                      </div>
-
+                    <div class="flex flex-col items-start px-1 text-sm mt-6">
                       <div class="w-full overflow-x-auto">
                         <AnimatePresence mode="wait">
                           <motion.div
                             :key="currentTab"
-                            :initial="{ opacity: 0 }"
-                            :animate="{ opacity: 1 }"
-                            :exit="{ opacity: 0 }"
-                            :transition="{ duration: 0.5 }"
+                            :initial="{ opacity: 0, y: 4 }"
+                            :animate="{ opacity: 1, y: 0 }"
+                            :exit="{ opacity: 0, y: -4 }"
+                            :transition="{ duration: 0.25, ease: 'easeOut' }"
                             class="relative flex items-start px-1 text-sm min-w-max"
                           >
                             <!-- Line numbers gutter -->
                             <div
                               aria-hidden="true"
-                              class="border-slate-300/5 text-slate-600 select-none border-r pr-4 font-mono"
+                              class="text-slate-600 select-none pl-2 pr-4 font-mono text-xs sm:text-sm leading-6"
                             >
                               <div v-for="i in lineCount" :key="i">
                                 {{ String(i).padStart(2, '0') }}
                               </div>
                             </div>
 
                             <!-- Code via MDC -->
-                            <div class="hero-code pl-4">
+                            <div class="hero-code">
                               <MDC :value="getCodeBlock(tabs[currentTab]!)" tag="div" />
                             </div>
                           </motion.div>

docs/app/components/content/landing/hero.yml

@@ -15,7 +15,7 @@ tabs:
           '/admin/**': { auth: 'admin' },
         },
       })
-  - name: auth.config.ts
+  - name: server/auth.config.ts
     code: |
       import { admin, twoFactor } from 'better-auth/plugins'
 
@@ -26,7 +26,20 @@ tabs:
         },
         plugins: [admin(), twoFactor()],
       }))
-  - name: login.vue
+  - name: app/auth.client.ts
+    code: |
+      import { adminClient, twoFactorClient } from 'better-auth/client/plugins'
+      import { createAuthClient } from 'better-auth/vue'
+
+      export function createAppAuthClient(baseURL: string) {
+        return createAuthClient({
+          baseURL,
+          plugins: [adminClient(), twoFactorClient()],
+        })
+      }
+
+      export type AppAuthClient = ReturnType<typeof createAppAuthClient>
+  - name: app/pages/login.vue
     code: |
       <script setup lang="ts">
       const { signIn } = useUserSession()