LandingHero

A responsive hero for your landing pages.

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

Watch your dreams materialize before your eyes with us.

<ULandingHero
  title="Turn Your Vision into Reality"
  description="Watch your dreams materialize before your eyes with us."
/>

Use the links prop to add some Buttons below the description.

Turn Your Vision into Reality

Watch your dreams materialize before your eyes with us.

<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' }]"
/>

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

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.

<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>

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:

content/index.yml
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 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/guide
      size: lg
      icon: i-heroicons-rocket-launch
    - label: Buy now
      to: /pro#pricing
      color: gray
      icon: i-heroicons-credit-card
      size: lg
We're using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.
pages/index.vue
<script setup>
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

top
{}
headline
{}
title
{}
description
{}
links
{}
default
{}
bottom
{}

Props

ui
{}
{}
description
string
""
orientation
"horizontal" | "vertical"
"vertical"
links
(Button & { click?: Function; })[]
[]
title
string
""