Step 1: Editing Text Content

Locate the text elements in the component:

Overline Text

tsxCopy code<Overline className="text-white sm:text-inherit">Overline text</Overline>

• Edit: Replace "Overline text" with a short introductory phrase or tagline.

Example Update:

tsxCopy code<Overline className="text-white sm:text-inherit">Innovate Your Future</Overline>

Main Heading

tsxCopy code<Display as="h1" className="mt-4 text-5xl sm:text-6xl md:text-7xl font-extrabold leading-tight">
  Saepe officia aliquid inventore tempore
</Display>

• Edit: Replace the placeholder text with your main headline.

Example Update:

tsxCopy code<Display as="h1" className="mt-4 text-5xl sm:text-6xl md:text-7xl font-extrabold leading-tight">
  Revolutionize Your Workflow Today
</Display>

Body Text

tsxCopy code<Body1 className="text-lg sm:text-xl mt-6 max-w-2xl mx-auto sm:mx-0">
  Laudantium quibusdam dolorum libero facere iure, quis molestias dolore quod inventore expedita?
</Body1>

• Edit: Replace the placeholder text with a concise description or callout.

Example Update:

tsxCopy code<Body1 className="text-lg sm:text-xl mt-6 max-w-2xl mx-auto sm:mx-0">
  Empower your team with tools designed to optimize productivity and streamline collaboration.
</Body1>

Step 2: Updating Buttons

Primary Button

tsxCopy code<Button variant="solid" color="neutral" href="#">
  Explore Now
</Button>

• Edit Text: Change Explore Now to your desired call-to-action.

• Edit Link: Replace "#" with the URL the button should navigate to.

Example Update:

tsxCopy code<Button variant="solid" color="neutral" href="/features">
  Get Started
</Button>

Secondary Button

tsxCopy code<Button variant="outline" color="neutral" href="#" className="hidden sm:flex">
  Learn More
</Button>

• Edit Text: Change Learn More to reflect its purpose.

• Edit Link: Replace "#" with the appropriate URL.

Example Update:

tsxCopy code<Button variant="outline" color="neutral" href="/pricing" className="hidden sm:flex">
  View Plans
</Button>

• For mobile: Edit the version styled for smaller screens:

tsxCopy code<Button variant="outline" color="light" href="#" className="flex sm:hidden">
  Learn More
</Button>

Step 3: Replacing the Background Image

Mobile Version Background

Locate this block of code:

tsxCopy code<Image
  src="/images/Image-J.webp"
  alt="Hero Image"
  layout="fill"
  objectFit="cover"
  className="absolute inset-0 z-0 sm:hidden"
/>

• Replace the Image Path (src): Update "/images/Image-J.webp" with the path to your own image.

  • If your image is local, place it in the public/images/ folder (or another appropriate directory) and use the relative path (e.g., "/images/my-hero-image.jpg").

• Update Alt Text (alt): Replace "Hero Image" with a descriptive phrase (e.g., "Team Collaborating").

Example Update:

tsxCopy code<Image
  src="/images/my-hero-image.jpg"
  alt="Team Collaborating"
  layout="fill"
  objectFit="cover"
  className="absolute inset-0 z-0 sm:hidden"
/>

Desktop Version Background

Locate this block of code:

tsxCopy code<Image
  src="/images/Image-J.webp"
  alt="Hero Image"
  layout="fill"
  objectFit="cover"
/>

• Follow the same steps as above to update the src and alt values.

Step 4: Adding a Gradient Overlay

You may want to customize the gradient overlay for the desktop view. Locate this code:

tsxCopy code<div className="sm:absolute inset-0 bg-gradient-to-r from-black to-transparent z-0 "></div>

• Edit Colors: Update the from-black to-transparent classes to use your desired gradient colors.

  • Example: bg-gradient-to-r from-gray-800 to-gray-200.

Step 5: Testing Your Changes

1. Run Your Project: Use npm run dev (or yarn dev) to preview changes locally.

2. Verify Responsiveness:

   • Check both desktop and mobile views.

   • Ensure the gradient overlay and buttons display correctly on all screen sizes.

3. Accessibility Check:

   • Confirm the alt text is meaningful for all images.

   • Verify that buttons are navigable via keyboard (e.g., Tab key).

Best Practices

1. Image Optimization:

   • Use compressed images (e.g., .webp format) for faster load times.

   • Test for both high-resolution and low-bandwidth scenarios.

2. Consistent Styling:

   • Ensure colors and typography align with your app’s design system.

   • Test button hover and focus states.

3. SEO and Accessibility:

   • Use descriptive alt text for all images.

   • Ensure headings (<h1>) are unique and descriptive.

By following this guide, you can customize the HeroComponentThree component to fit your branding and create a polished, responsive hero section.