feat: hero alt mobile placement

Signed-off-by: ZTL-UwU <[email protected]>

components/content/HeroAlt.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="gap-4 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10"
+    class="gap-8 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10"
     :class="{ 'grid md:grid-cols-3': $slots.right }"
   >
     <section
@@ -43,9 +43,9 @@
         </NuxtLink>
       </div>
     </section>
-    <section>
+    <div class="mx-auto" :class="{ 'order-first md:order-last': mobileRight === 'top' }">
       <ContentSlot :use="$slots.right" unwrap="p" />
-    </section>
+    </div>
   </div>
 </template>
 
@@ -65,5 +65,6 @@ defineProps<{
     to: string;
     target?: Target;
   }];
+  mobileRight?: 'top' | 'bottom';
 }>();
 </script>

content/2.components/3.page/hero-alt.md

@@ -45,6 +45,7 @@ toc: false
       - name: GitHub
         variant: ghost
         to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+    mobileRight: 'top' # 'top' | 'bottom'
     ---
 
     #title
@@ -54,13 +55,7 @@ toc: false
     Beautifully designed components that you can copy and paste into your apps.
 
     #right
-    ```bash [Terminal]
-    # Get Starter Template
-    bun x nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
-
-    # Start Development Server
-    bun run dev
-    ```
+    ![logo](/logo.svg)
     ::
   ::
   ```mdc[Code]
@@ -98,6 +93,7 @@ toc: false
     - name: GitHub
       variant: ghost
       to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+  mobileRight: 'top' # 'top' | 'bottom'
   ---
 
   #title
@@ -107,13 +103,7 @@ toc: false
   Beautifully designed components that you can copy and paste into your apps.
 
   #right
-  ```bash [Terminal]
-  # Get Starter Template
-  bun x nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
-
-  # Start Development Server
-  bun run dev
-  ```
+  ![logo](/logo.svg)
   ::
   ```
 ::