LandingHero
Usage
The LandingHero component will wrap your content in a Container but the wrapper takes the full width of the screen so you can easily change the background.
Use the title and description props to customize the content of the hero.
Turn Your Vision into Reality
<template>
<ULandingHero
title="Turn Your Vision into Reality"
description="Watch your dreams materialize before your eyes with us."
/>
</template>
Use the links prop to add some Buttons below the description.
Turn Your Vision into Reality
<template>
<ULandingHero
title="Turn Your Vision into Reality"
description="Watch your dreams materialize before your eyes with us."
:links="[{ label: 'Get Started', icon: 'i-heroicons-rocket-launch', size: 'lg' }, { label: 'Learn more', trailing-icon: 'i-heroicons-arrow-small-right', color: 'gray', size: 'lg' }]"
/>
</template>
You can add anything you want in the default slot, an image or a code-block using the MDC component (when using @nuxt/content) for example.
You can change the orientation prop from vertical to horizontal to position the slot on the right side of the hero (this will render better on full-screen).
You can use the #headline slot to add a Badge, a Button or anything you want above the title.
Supercharged GitHub experience
<template>
<ULandingHero
title="Supercharged GitHub experience"
description="Work in real-time with your team on open-source and private repositories, all in one place. Working on GitHub issues and notifications has never been that fun."
orientation="vertical"
:links="[{ label: 'Continue with GitHub', icon: 'i-simple-icons-github', color: 'gray', size: 'lg' }]"
>
<template #headline>
<UButton
color="gray"
to="https://volta.net/changelog"
label="See what's new in v1.17.0"
trailing-icon="i-heroicons-arrow-right"
size="xs"
class="rounded-full"
/>
</template>
<template #default>
<img
src="https://picsum.photos/640/360"
class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
/>
</template>
</ULandingHero>
</template>
You can also use the #title, #description and #links slots to customize the content of the hero. This can be quite useful when using @nuxt/content if your content has HTML for example:
navigation: false
hero:
title: The <span class="text-primary">Building Blocks</span> for<br>Modern Web Apps
description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.'
links:
- label: Get Started
to: /pro/getting-starated
size: lg
icon: i-heroicons-rocket-launch
- label: Buy now
to: /pro/pricing
color: gray
icon: i-heroicons-ticket
size: lg
.yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingHero :links="page.hero.links">
<template #title>
<span v-html="page.hero.title" />
</template>
<template #description>
<span v-html="page.hero.description" />
</template>
</ULandingHero>
</template>
You can use the #top and #bottom slots to add content above and below the container, this can be useful when adding some absolute positioned svgs for example.
Slots
Props
undefinedundefined"vertical"{}[]Config
{
wrapper: 'py-24 sm:py-32 md:py-40 relative',
container: 'gap-16 sm:gap-y-24 flex flex-col',
base: 'text-center',
headline: 'mb-10',
title: 'text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-7xl',
description: 'mt-6 text-lg tracking-tight text-gray-600 dark:text-gray-300',
links: 'mt-10 flex flex-wrap justify-center gap-x-6 gap-y-3'
}