feat: add base structure for leaf zero

Author: mychidarko

.vitepress/config/sidebar.ts

@@ -142,23 +142,23 @@ const sidebar = [
       { text: 'Tailwind CSS', link: '/docs/frontend/tailwind' },
       { text: 'Inertia JS', link: '/docs/frontend/inertia' },
       // { text: 'Leaf UI', link: '/docs/frontend/leaf-ui' },
-      // {
-      //   text: 'Leaf Zero',
-      //   collapsible: true,
-      //   collapsed: true,
-      //   items: [
-      //     { text: 'Introduction', link: '/docs/frontend/zero/' },
-      //     { text: 'Layouts', link: '/docs/frontend/zero/layouts' },
-      //     { text: 'Forms', link: '/docs/frontend/zero/forms' },
-      //     { text: 'Modals', link: '/docs/frontend/zero/modals' },
-      //     { text: 'Alerts', link: '/docs/frontend/zero/alerts' },
-      //     { text: 'Loading', link: '/docs/frontend/zero/loading' },
-      //     { text: 'Icons', link: '/docs/frontend/zero/icons' },
-      //     { text: 'Forms', link: '/docs/frontend/zero/forms' },
-      //     { text: 'Merketing Sections', link: '/docs/frontend/zero/marketing' },
-      //     { text: 'Dashboard Sections', link: '/docs/frontend/zero/dashboard' },
-      //   ],
-      // },
+      {
+        text: 'Leaf Zero',
+        collapsible: true,
+        collapsed: true,
+        items: [
+          { text: 'Introduction', link: '/docs/frontend/zero/' },
+          // { text: 'Layouts', link: '/docs/frontend/zero/layouts' },
+          { text: 'Forms', link: '/docs/frontend/zero/forms' },
+          // { text: 'Modals', link: '/docs/frontend/zero/modals' },
+          // { text: 'Alerts', link: '/docs/frontend/zero/alerts' },
+          // { text: 'Loading', link: '/docs/frontend/zero/loading' },
+          { text: 'Icons', link: '/docs/frontend/zero/icons' },
+          // { text: 'Forms', link: '/docs/frontend/zero/forms' },
+          { text: 'Merketing Sections', link: '/docs/frontend/zero/marketing' },
+          // { text: 'Dashboard Sections', link: '/docs/frontend/zero/dashboard' },
+        ],
+      },
     ],
   },
   {

src/docs/frontend/zero/alerts.md

@@ -0,0 +1,109 @@
+---
+aside: false
+---
+
+# Form sections & components
+
+<!-- markdownlint-disable no-inline-html -->
+<script setup>
+import PreviewCode from '@theme/components/shared/PreviewCode.vue';
+import TutorialNumber from '@theme/components/shared/TutorialNumber.vue';
+</script>
+
+Login, signup, contact forms, and more are essential parts of any web application. Leaf Zero provides a set of example forms that you can use to build forms quickly and easily.
+
+## Auth Forms
+
+Drop in replacements for Leaf MVC auth layouts and auth forms.
+
+::: details Auth Centred <img src="https://github.com/user-attachments/assets/b1397a2e-d1ab-4b35-b2a3-d055cc8918d0" class="w-full h-full rounded-lg" lazy />
+
+::: code-group
+
+```blade [Blade]
+something
+```
+
+```jsx [React]
+something
+```
+
+```vue [Vue]
+something
+```
+
+```svelte [Svelte]
+something
+```
+
+:::
+
+::: details Form right half <img src="https://github.com/user-attachments/assets/b1397a2e-d1ab-4b35-b2a3-d055cc8918d0" class="w-full h-full rounded-lg" lazy />
+
+::: code-group
+
+```blade [Blade]
+something
+```
+
+```jsx [React]
+something
+```
+
+```vue [Vue]
+something
+```
+
+```svelte [Svelte]
+something
+```
+
+:::
+
+## Form Components
+
+Form components for use in all kinds of applications.
+
+::: details Input Component <img src="https://github.com/user-attachments/assets/b1397a2e-d1ab-4b35-b2a3-d055cc8918d0" class="w-full h-full rounded-lg" lazy />
+
+::: code-group
+
+```blade [Blade]
+something
+```
+
+```jsx [React]
+something
+```
+
+```vue [Vue]
+something
+```
+
+```svelte [Svelte]
+something
+```
+
+:::
+
+::: details Button Component <img src="https://github.com/user-attachments/assets/b1397a2e-d1ab-4b35-b2a3-d055cc8918d0" class="w-full h-full rounded-lg" lazy />
+
+::: code-group
+
+```blade [Blade]
+something
+```
+
+```jsx [React]
+something
+```
+
+```vue [Vue]
+something
+```
+
+```svelte [Svelte]
+something
+```
+
+:::

src/docs/frontend/zero/dashboard.md

@@ -0,0 +1,41 @@
+---
+aside: false
+---
+
+<!-- markdownlint-disable no-inline-html -->
+
+# Icons for Blade <Badge type="warning">Blade Only</Badge>
+
+Zero provides a wrapper around [HeroIcons](https://heroicons.com/) which allows you to use every HeroIcon right in your Blade component. To get started, you need to install Zero through composer:
+
+::: code-group
+
+```bash:no-line-numbers [Leaf CLI]
+leaf install zero
+```
+
+```bash:no-line-numbers [Composer]
+composer require leafs/zero
+```
+
+:::
+
+## Usage
+
+You can use the `@icon` directive to render an icon in your Blade component. The `icon` method accepts the name of the icon you want to render. You can find the name of the icon you want to render on the [HeroIcons website](https://heroicons.com/).
+
+```blade:no-line-numbers
+@icon('academic-cap')
+```
+
+You can also pass extra options like a class or style to the icon:
+
+```blade:no-line-numbers
+@icon('academic-cap', ['class' => 'text-red-500', 'style' => 'font-size: 2rem;'])
+```
+
+If you need to render an icon as text, so you can use it in JavaScript, you can use the `@iconText` directive:
+
+```blade:no-line-numbers
+@iconText('academic-cap')
+```

src/docs/frontend/zero/form-components.md

@@ -0,0 +1,43 @@
+---
+outline: 'deep'
+---
+
+<!-- markdownlint-disable no-inline-html -->
+
+# Leaf Zero <Badge>NEW</Badge>
+
+<script setup>
+import TutorialNumber from '@theme/components/shared/TutorialNumber.vue';
+</script>
+
+A free collection of pre-built components, page sections, and templates designed to help you build faster. With Tailwind for styling, Alpine.js/React/Vue/Svelte for interactivity, and ready-to-use Blade and PHP snippets, you can skip the boilerplate and focus on shipping. Just copy, paste, and customize—whether you're building a landing page or a full app, Leaf Zero gives you the building blocks to move fast.
+
+::: info Zero UI Support
+
+We try to provide support for Alpine, React, Vue and Svelte on every component, however, some things like Modals, Toasts and Icons are currently Blade/Alpine only. We will add support for React, Vue and Svelte later, but for now Shadcn UI has a ton of components you can use with React, Vue and Svelte.
+
+:::
+
+## Page Sections
+
+Find page sections like headers, footers, features, pricing, and more. Each section is a standalone component that you can mix and match to create your own custom pages.
+
+- [Marketing page Sections](/docs/frontend/zero/marketing)
+<!-- - [Dashboard Sections](/docs/frontend/zero/dashboard)
+- [Form sections](/docs/frontend/zero/forms)
+- [Application Layouts](/docs/frontend/zero/layouts) -->
+
+## Components & Examples
+
+Zero also includes everyday components to help you build faster and easier.
+
+- [Form components](/docs/frontend/zero/forms)
+- [Icons](/docs/frontend/zero/icons)
+<!-- - [Toasts](/docs/frontend/zero/toasts)
+- [Pagination](/docs/frontend/zero/pagination)
+- [Modals](/docs/frontend/zero/modals)
+- [Application states](/docs/frontend/zero/loading) -->
+
+<!-- ## Pre-release UI Snippets
+
+We are working on more sections, components and UI snippets which we will add here over the next few weeks, however, you can get all of these plus some full-page templates by purchasing [Paperplane](https://paperplane.leafphp.dev) -->