arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 12:17:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: add marketing pages (#3308)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
2025-02-14 14:18:14 +01:00
committed by GitHub
parent d4bc9b3d0e
commit ba3ed86ae1
52 changed files with 1855 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
docs/app/pages/pro/.content/pro.yml Normal file
View File

@@ -0,0 +1,174 @@
title: Build faster with Nuxt UI Pro.
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your application.
hero:
title: Build faster with Nuxt UI [Pro]{class="text-(--ui-primary)"}.
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these **responsive components** are designed to be the perfect **building blocks for your next idea**.
links:
- label: Get started
icon: i-lucide-arrow-right
trailing: true
to: /getting-started/installation/pro/nuxt
size: xl
- label: Purchase a license
size: xl
color: neutral
variant: outline
to: /pro/pricing
features:
title: Create stunning Vue applications faster.
description: Nuxt UI Pro comes packed with powerful features to help you build modern, performant, accessible and responsive Nuxt applications at record speed. From pre-built UI sections to Figma design kits, every detail is crafted to speed up your development and deliver a polished user experience.
features:
- title: 40+ Ready-to-use Sections
description: Pre-built UI components for landing pages, documentation, blogs, dashboards, and more—ready to use out of the box.
icon: i-lucide-layout-grid
- title: Auto Dark Mode
description: Seamlessly adapts to user preferences with a built-in dark mode switch—no extra configuration needed.
icon: i-lucide-moon
- title: Blazing-fast Performance
description: Optimized for Nuxt 3 with minimal bundle size, lightning-fast rendering, and best practices in performance.
icon: i-lucide-zap
- title: SEO & Accessibility Ready
description: Built with proper semantic HTML, structured data, and accessibility in mind for better rankings and usability.
icon: i-lucide-search-check
- title: Fully Customizable UI
description: Modify colors, fonts, spacing, and layouts with Tailwind CSS and Nuxt UI’s design tokens to match your brand identity.
icon: i-lucide-settings-2
- title: Nuxt Content Support
description: Write content with Markdown and MDC, making it easy to build documentation, blogs, and knowledge bases.
icon: i-simple-icons-markdown
- title: Vue-only mode
description: Enjoy the benefits of Nuxt UI Pro without Nuxt. Integrate it seamlessly into your Vue 3 + Vite projects and build modern UIs with ease.
icon: i-simple-icons-vuedotjs
- title: Built-in Internationalization (i18n)
description: Easily localize your site with built-in support for multiple languages and right-to-left (RTL) layouts.
icon: i-lucide-globe
- title: Figma Design Kits
description: Match your development workflow with Nuxt UI & UI Pro Figma UI kits, ensuring a fast transition from design to code.
icon: i-simple-icons-figma
authorQuote:
quote: Nuxt UI, born from a desire to improve Vue component development, is the go-to library for building modern web interfaces. We aim to provide you with a comprehensive set of tools to create and customize your next UI while maintaining the best developer experience.
user:
name: Benjamin Canac
description: Author of Nuxt UI
to: https://github.com/benjamincanac
avatar:
src: https://github.com/benjamincanac.png
sections:
- title: The freedom to build anything
description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
id: features
features:
- name: Fully customizable
description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
icon: i-lucide-pencil-ruler
- name: Slots for everything
description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
icon: i-lucide-code
- name: Responsive by design
description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
icon: i-lucide-layout
links:
- label: Explore components
to: /components
trailingIcon: i-lucide-arrow-right
code: |
```vue [app.vue]
<script setup lang="ts">
const links = [
{ to: '/', label: 'Home' },
{ to: '/about', label: 'About' },
{ to: '/contact', label: 'Contact' }
]
</script>
<template>
<UApp>
<UHeader :links="links" />
<UPageHero title="Hello World" />
<UPageSection title="Features">
<UPageGrid>
<UPageCard title="First Card" />
<UPageCard title="Second Card" />
<UPageCard title="Third Card" />
</UPageGrid>
</UPageSection>
<UFooter />
</UApp>
</template>
```
- title: The flexibility to control your data
description: Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.
reverse: true
features:
- name: 'Write Markdown with ease'
description: Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
icon: i-simple-icons-markdown
- name: Full-Text Search out of the box
description: 'Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.'
icon: i-lucide-search
links:
- label: Nuxt Content integration
to: /getting-started/content
icon: i-lucide-arrow-right
trailing: true
code: |
```vue [pages/\[...slug\\].vue]
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
</script>
<template>
<UPage>
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
<UPageBody>
<ContentRenderer v-if="page.body" :value="page" />
</UPageBody>
<template #right>
<UContentToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
```
templates:
headline: Templates
title: Kickstart with Nuxt UI Pro in seconds
description: Choose from a variety of templates to get started with Nuxt UI Pro in seconds. Each template is designed to help you build beautiful and responsive Nuxt applications in minutes.
items:
- title: Landing
description: A template for building a landing page with Nuxt UI Pro.
icon: i-lucide-layout
to: 'https://landing-template.nuxt.dev/'
image: '/pro/templates/landing.png'
- title: Saas
description: A template for building a SaaS application with Nuxt UI Pro.
icon: i-lucide-cloud
to: 'https://saas-template.nuxt.dev/'
image: '/pro/templates/saas.png'
- title: Docs
description: A template for building a documentation site with Nuxt UI Pro.
icon: i-lucide-book
to: 'https://docs-template.nuxt.dev/'
image: '/pro/templates/docs.png'
- title: Dashboard
description: A template for building a dashboard with Nuxt UI Pro.
icon: i-lucide-chart-bar
to: 'https://dashboard-template.nuxt.dev/'
image: '/pro/templates/dashboard.png'
cta:
title: Start with Nuxt UI Pro today!
description: Nuxt UI Pro is free in development, but you need a license to use it in production.
links:
- label: Purchase a license
to: '/pro/pricing'
icon: i-lucide-shopping-cart
- label: License
to: '/getting-started/license'
trailingIcon: i-lucide-circle-help
variant: subtle