Revert "fix: improve landing page code preview UI"

This reverts commit 7079fd0.

Author: onmax

docs/app/assets/css/main.css

@@ -88,12 +88,9 @@ pre, code {
 /* Hero code block styling */
 .hero-code pre {
   background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-  margin: 0 !important;
+  padding: 0.5rem 1rem;
+  margin: 0;
   font-size: 0.75rem;
-  border-radius: 0 !important;
-  line-height: 1.5rem !important;
 }
 
 @media (min-width: 640px) {
@@ -109,13 +106,3 @@ 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,12 +1,13 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import { motion, MotionConfig } from 'motion-v'
+import { useClipboard, 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 }[]
 
@@ -132,10 +133,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.15, type: 'spring', bounce: 0 }">
+            <MotionConfig :transition="{ duration: 0.5, type: 'spring', bounce: 0 }">
               <motion.div
                 :animate="{ height: height > 0 ? height : undefined }"
-                class="code-preview relative overflow-hidden rounded-sm backdrop-blur-lg"
+                class="code-preview relative overflow-hidden rounded-sm ring-1 ring-white/10 backdrop-blur-lg"
               >
                 <div ref="contentRef">
                   <div class="absolute -top-px left-0 right-0 h-px" />
@@ -167,24 +168,47 @@ function getCodeBlock(tab: { name: string, code: string }) {
                     </div>
 
                     <!-- Code content area -->
-                    <div class="flex flex-col items-start px-1 text-sm mt-4">
+                    <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="w-full overflow-x-auto">
-                        <div class="relative flex items-start px-1 text-sm min-w-max">
-                          <!-- Line numbers gutter -->
-                          <div
-                            aria-hidden="true"
-                            class="text-slate-600 select-none pl-2 pr-4 font-mono text-xs sm:text-sm leading-6"
+                        <AnimatePresence mode="wait">
+                          <motion.div
+                            :key="currentTab"
+                            :initial="{ opacity: 0 }"
+                            :animate="{ opacity: 1 }"
+                            :exit="{ opacity: 0 }"
+                            :transition="{ duration: 0.5 }"
+                            class="relative flex items-start px-1 text-sm min-w-max"
                           >
-                            <div v-for="i in lineCount" :key="i">
-                              {{ String(i).padStart(2, '0') }}
+                            <!-- Line numbers gutter -->
+                            <div
+                              aria-hidden="true"
+                              class="border-slate-300/5 text-slate-600 select-none border-r pr-4 font-mono"
+                            >
+                              <div v-for="i in lineCount" :key="i">
+                                {{ String(i).padStart(2, '0') }}
+                              </div>
                             </div>
-                          </div>
 
-                          <!-- Code via MDC -->
-                          <div class="hero-code">
-                            <MDC :value="getCodeBlock(tabs[currentTab]!)" tag="div" />
-                          </div>
-                        </div>
+                            <!-- Code via MDC -->
+                            <div class="hero-code pl-4">
+                              <MDC :value="getCodeBlock(tabs[currentTab]!)" tag="div" />
+                            </div>
+                          </motion.div>
+                        </AnimatePresence>
                       </div>
 
                       <!-- Demo CTA (bottom-right) -->

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

@@ -15,7 +15,7 @@ tabs:
           '/admin/**': { auth: 'admin' },
         },
       })
-  - name: server/auth.config.ts
+  - name: auth.config.ts
     code: |
       import { admin, twoFactor } from 'better-auth/plugins'
 
@@ -26,20 +26,7 @@ tabs:
         },
         plugins: [admin(), twoFactor()],
       }))
-  - 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
+  - name: login.vue
     code: |
       <script setup lang="ts">
       const { signIn } = useUserSession()