feat(layer): add PageHero, PageSection, PageCard components and enhance ButtonA

apps/docs/app/components/content/FloatingNuxt.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex-1 flex items-center justify-center">
+    <NuxtImg
+      src="/landing/nuxt-logo-3D.svg"
+      class="h-42 floating-logo"
+      alt="Nuxt 3D Logo"
+    />
+  </div>
+</template>
+
+<style>
+.floating-logo {
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.group:hover .floating-logo {
+  transform: translateY(-20px);
+}
+</style>

apps/docs/content/index.md

@@ -1,97 +1,156 @@
 ---
 title: PleaseAI Docs
-description: Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Built with shadcn-vue and Nuxt Content.
+seo:
+  title: Write beautiful docs with Markdown
+  description: Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Built with shadcn-vue and Nuxt Content.
 ---
 
-::div{.flex.flex-col.items-center.text-center.py-16.md:py-24}
+::u-page-hero
+#headline
+  :::u-button{to="https://github.com/pleaseai/docs/releases" target="_blank" variant="outline" size="sm"}
+  docs-please v1.0 →
+  :::
 
-# Write beautiful docs with Markdown.
+#title
+Write beautiful docs with Markdown.
 
-Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
+#description
+Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Built with **shadcn-vue** and **Nuxt Content**.
 
-Built with **shadcn-vue** and **Nuxt Content**.
+#links
+  :::u-button{to="/docs/getting-started/introduction" size="lg"}
+  Get Started →
+  :::
 
-::div{.flex.flex-wrap.justify-center.gap-4.mt-8}
-    ::ButtonA{to="/docs"}
-    Get Started
-    ::
-
-    ::ButtonA{to="https://github.com/pleaseai/docs" target="\_blank" external}
-    GitHub
-    ::
+  :::u-button{to="https://github.com/pleaseai/docs" target="_blank" variant="outline" size="lg"}
+  Star on GitHub
+  :::
 ::
 
-::
-
----
-
-## Features
-
-::div{.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-6.mt-8}
-
-::FeatureCard{title="shadcn-vue Components"}
-Beautiful, accessible UI components built with Reka UI primitives and styled with Tailwind CSS.
-::
-
-::FeatureCard{title="Tailwind CSS v4"}
-Modern CSS with native CSS variables, oklch colors, and lightning-fast performance.
-::
-
-::FeatureCard{title="Dark Mode"}
-Built-in dark/light mode support with smooth transitions and system preference detection.
-::
-
-::FeatureCard{title="MDC Syntax"}
-Write pages in Markdown and extend with MDC syntax to embed Vue components seamlessly.
-::
-
-::FeatureCard{title="Full-text Search"}
-Auto-generated navigation and full-text search for your documentation.
-::
-
-::FeatureCard{title="Nuxt Layer"}
-Reusable Nuxt layer architecture - extend and customize to fit your needs.
-::
-
-::
-
----
-
-## Quick Start
-
-```bash
-npm install docs-please
-```
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  extends: ['docs-please']
-})
-```
-
-```md [content/docs/index.md]
----
-title: Introduction
-description: Getting started with your documentation
----
-
-# Welcome
-
-Start writing your documentation in Markdown.
-```
-
----
-
-## Documentation
-
-Explore the documentation to learn more about features and customization options.
-
-::div{.flex.flex-wrap.gap-4.mt-6}
-::ButtonA{to="/docs/getting-started/introduction"}
-Introduction
-::
-
-::ButtonA{to="/docs/components/overview"}
-Components
-::
+::u-page-section
+  :::u-page-grid{class="lg:grid-cols-2"}
+    ::::u-page-card
+    ---
+    spotlight: true
+    class: col-span-1
+    target: _blank
+    to: https://nuxt.com
+    ---
+      :::::floating-nuxt
+      :::::
+
+    #title
+    Built with [Nuxt 4]{.text-primary}
+
+    #description
+    Optimized by the most famous Vue framework. Everything you need to build fast, performant, and SEO-friendly documentation websites.
+    ::::
+
+    ::::u-page-card{to="https://ui.shadcn.com" target="_blank" class="col-span-1"}
+    #title
+    Powered by [shadcn-vue]{.text-primary}
+
+    #description
+    Beautiful, accessible UI components built with Reka UI primitives. Minimal by design but highly customizable for your documentation needs.
+    ::::
+
+    ::::u-page-card
+    ---
+    spotlight: true
+    class: col-span-1 lg:col-span-2
+    ---
+      :::::tabs{default-value="preview"}
+        ::::::tabs-list
+          :::::::tabs-trigger{value="preview"}
+          Preview
+          :::::::
+          :::::::tabs-trigger{value="code"}
+          Code
+          :::::::
+        ::::::
+        ::::::tabs-content{value="preview"}
+          :::::::div{class="flex flex-col gap-4"}
+            ::::::::note{class="my-0"}
+            Here's some additional information for you.
+            ::::::::
+
+            ::::::::tip{class="my-0"}
+            Here's a helpful suggestion.
+            ::::::::
+
+            ::::::::warning{class="my-0"}
+            Be careful with this action as it might have unexpected results.
+            ::::::::
+
+            ::::::::caution{class="my-0"}
+            This action cannot be undone.
+            ::::::::
+          :::::::
+        ::::::
+
+        ::::::tabs-content{value="code" class="text-sm overflow-x-auto"}
+        ```mdc
+        ::note
+        Here's some additional information.
+        ::
+
+        ::tip
+        Here's a helpful suggestion.
+        ::
+
+        ::warning
+        Be careful with this action.
+        ::
+
+        ::caution
+        This action cannot be undone.
+        ::
+        ```
+        ::::::
+      :::::
+
+    #title
+    Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
+
+    #description
+    Write your pages in Markdown and extend with MDC syntax to embed Vue components seamlessly. Structure, routing, and rendering are handled for you.
+    ::::
+
+    ::::u-page-card{class="col-span-1"}
+    #title
+    Customize with [App Config]{.text-primary}
+
+    #description
+    Update colors, social links, header logos and component styles globally using `app.config.ts`, no direct code modifications required.
+
+    #body
+    ```ts [app.config.ts]
+    export default defineAppConfig({
+      docs: {
+        title: 'My Docs',
+        github: {
+          owner: 'myorg',
+          name: 'my-docs'
+        }
+      }
+    })
+    ```
+    ::::
+
+    ::::u-page-card{class="col-span-1"}
+    #title
+    [Dark Mode]{.text-primary} built-in
+
+    #description
+    Built-in dark/light mode support with smooth transitions and system preference detection. No configuration required.
+    ::::
+
+    ::::u-page-card{class="col-span-1 lg:col-span-2"}
+    #title
+    Built-in navigation and [full-text search]{.text-primary}
+
+    #description
+    Only focus on ordering your content. Auto-generated side navigation and full-text search are built-in to help users find what they need.
+    ::::
+  :::
 ::