Hero

Overview

The Welcome component is designed to provide a centralized, eye-catching introduction or welcome message for your application or website. It allows for a large title and a description that can be a list of sentences or key points. The component is highly customizable through slots, allowing for additional content such as buttons or links to be seamlessly integrated below the welcome message.

Features

1. Responsive Design: Tailored to look great on devices of all sizes, from mobile phones to large desktops.
2. Customizable Title: A prominent, bold title to catch the user's attention.
3. Flexible Description: Supports an array of text strings to detail your project, service, or any introductory content.
4. Slots for Additional Content: Easily add custom content (like buttons or links) under the description, enhancing the component's utility and interaction possibilities.

Props

This component does not use props for customization but instead relies on reactive variables defined within the <script setup> block.

• title (String): The main headline text. Default is 'WELCOME'.
• description (Array of Strings): A list containing paragraphs or sentences for detailed description. It supports multiple items to structure your message effectively.

Slots

Default slot: Any content placed within the <HeroComponent> component tags in the parent will be displayed at the bottom of the component. This is ideal for adding navigation buttons, links, or any call-to-action (CTA) elements.

Example Usage

<HeroComponent>
  <Button label="Cool Button" />
  <Button
    label="Secondary Button"
    secondary
  />
</HeroComponent>

Usage

To integrate this component into your Nuxt 3 application:

1. Copy the component code into a new .vue file within your project's components directory.
2. Ensure you have Tailwind CSS configured in your project for styling.
3. Use the component in your application by importing it in your Nuxt pages.
4. Place other components (ex: <ButtonComponent />) inside to make use of the slot.

Component Code

<script setup lang="ts">
const title = 'WELCOME';
const description = [
  "This is a cool project that does cool things. It is cool to use, look at, and other stuff like that and things and stuff that we don't even know.",
];
</script>

<template>
  <div>
    <div class="py-md lg:py-lg">
      <div class="mx-auto max-w-xl">
        <div class="mx-xs sm:mx-sm md:mx-md">
          <div>
            <div class="mx-auto flex flex-col items-center">
              <h2
                v-if="title"
                class="text-center text-4xl font-bold lg:text-6xl"
              >
                {{ title }}
              </h2>
              <div v-if="description">
                <div
                  v-for="item in description"
                  :key="item"
                  class="text-center md:text-2xl"
                >
                  <p>{{ item }}</p>
                </div>
              </div>
              <div class="mt-4 flex gap-4">
                <slot />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>