jsNectar

COOL HERO

This is a cool hero with image that you can use in your projects to make them cool as well

Button

Another Button

Overview

The HeroWithImage component is designed to showcase key features or highlights of your project, product, or service in a visually appealing and informative layout. This component is perfect for landing pages, product pages, or any section where you want to combine text and imagery to convey important information effectively. It supports responsive design, ensuring your content looks great on devices of all sizes.

Features

Responsive Design: Crafted to provide an optimal viewing experience across a wide range of devices from mobile phones to desktop computers.
Customizable Content: Allows for setting a title, description, and an accompanying image to tailor the section to your needs.
Slot for Additional Content: Offers a slot for adding extra elements like buttons or links, enabling further interaction opportunities for users.
Dark Mode Support: Adapts text colors for dark mode, ensuring readability and aesthetic consistency in different themes.

Props

The component accepts the following props for customization:

title (String, required): The headline for the feature section. Designed to grab attention and summarize the content.
description (String, required): A detailed description that elaborates on the feature, offering more context or information.
image (String, required): The URL of the image to be displayed alongside the text content. This should be a direct link to an image file that visually represents the feature being discussed.

Slots

Default slot: This slot can be used to insert additional HTML or Vue components beneath the description text. It's ideal for adding call-to-action buttons, links, or any other interactive elements that you want to include in the feature section.

Example Usage

<HeroWithImageComponent
  title="Innovative Design"
  description="Our product features an innovative design that simplifies workflows and enhances productivity. Explore how our solutions can benefit your business today."
  image="/path/to/image.jpg"
>
  <Button label="Cool Button" />
  <Button
    label="Secondary Button"
    secondary
  />
</HeroWithImageComponent>

Styling

The component utilizes Tailwind CSS for styling, which makes it easy to integrate into projects that already use Tailwind for their design system. The layout is divided into two main sections: text content and image display, providing a balanced visual appeal. The text and image sections are displayed side by side on larger screens and stacked on smaller devices for better responsiveness.

Usage

Ensure Tailwind CSS is set up in your project for consistent styling.
Copy the component code into a new .vue file within your components directory.
Import and use the HeroWithImage component in your application as required, providing the necessary props for customization.
Ensure that the image URL provided to the image prop is accessible and points to an image that complements the textual content.
Use the slot to add actionable items related to the feature, such as buttons or links, encouraging user engagement.
The component automatically adapts to dark mode if your project supports it. Ensure that the dark:text-primary class is configured appropriately in your Tailwind setup to reflect your design preferences.

Component Code

<script setup lang="ts">
interface PropsInterface {
  title: string;
  description: string;
  image: string;
}

defineProps<PropsInterface>();
</script>

<template>
  <div>
    <div
      class="mx-auto w-full max-w-7xl text-black dark:text-primary lg:flex lg:flex-row"
    >
      <div class="mx-10 my-lg flex flex-col text-center lg:w-1/2 lg:text-left">
        <h2
          v-if="title"
          class="text-2xl font-bold md:text-4xl lg:text-6xl"
        >
          {{ title }}
        </h2>
        <div>
          <p class="mt-2 text-xl lg:text-xl">
            {{ description }}
          </p>
        </div>
        <div class="mt-4 flex gap-2">
          <slot />
        </div>
      </div>
      <div class="mt-4 flex overflow-hidden md:mt-10 lg:mt-0 lg:w-1/2">
        <img
          class="object-cover"
          :src="image"
          alt="cool-image"
        />
      </div>
    </div>
  </div>
</template>

Hero with Image