LandingSection

feature:
  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.
  code: |
    ```vue [app.vue]
    <template>
      <UHeader :links="links" />

      <UMain>
        <ULandingHero title="Hello World" />

        <ULandingSection title="Features">
          <UPageGrid>
            <ULandingCard title="First Card" />
            <ULandingCard title="Second Card" />
            <ULandingCard title="Third Card" />
          </UPageGrid>
        </ULandingSection>
      </UMain>

      <UFooter />
    </template>
    ```

<script setup>
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection>
     <template #title>
      <span v-html="page.feature.title" />
    </template>

    <template #description>
      <span v-html="page.feature.description" />
    </template>

    <MDC
      v-if="page.feature.code"
      :value="page.feature.code"
      tag="pre"
      class="prose prose-primary dark:prose-invert max-w-none"
    />
  </ULandingSection>
</template>

sections:
  - title: 'The power of<br><span class="text-primary">Vue Components</span>'
    description: 'We love Vue Single-File Components as much as you do.'
    class: 'dark bg-gray-900'
    align: left
    slot: code
    code: |
      ```vue [app.vue]
      <template>
        <NuxtPage />
      </template>
      ```
  - title: 'Compose with<br><span class="text-primary">everything you need.</span>'
    slot: features
    features:
      - title: 'Routing & Layouts'
        description: 'File based routing system to build complex views and interfaces with a powerful and conventional approach.'
        icon: 'i-ph-signpost-duotone'
        to: '/docs/getting-started/routing'
      - title: 'Data Fetching'
        description: 'Composables that run on the server to fetch data for your components and enable you to render content in different ways.'
        icon: 'i-ph-plugs-connected-duotone'
        to: '/docs/getting-started/data-fetching'
      - title: 'Assets & Style'
        description: 'Image, Font and Script optizations with a built-in support for CSS Modules, Sass, PostCSS, CSS-in-JS and more.'
        icon: 'i-ph-image-duotone'
        to: '/docs/getting-started/styling'

<script setup>
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection v-for="(section, index) of page.sections" :key="index" :slot="section.slot" :class="section.class" :align="section.align" :links="section.links">
    <template #title>
      <span v-html="section.title" />
    </template>

    <template #description>
      <span v-if="section.description" v-html="section.description" />
    </template>

    <template #code>
      <MDC :value="section.code" tag="pre" class="prose prose-primary dark:prose-invert max-w-none" />
    </template>

    <template #features>
      <UPageGrid>
        <UPageCard v-for="(feature, index) in features" :key="index" v-bind="feature" />
      </UPageGrid>
    </template>
  </ULandingSection>
</template>