Add a Hero Component to Auraui

[Jayjeet1013]

We need to add a responsive, customizable Hero component to the Auraui library. This component will serve as a key element for showcasing primary content, calls to action, or important announcements.

Requirements:

1. Hero Section:

a. A visually appealing hero section to highlight key content.
b. The component should include:

• Background image or color options.
• Headline and subheadline text areas.
• Call-to-action buttons (with customizable text, size, and colors).
• Optional support for small descriptions or taglines.
  c. Ensure flexibility in the layout to accommodate variations (centered text, left-aligned, etc.).

2. Responsiveness:

a. Fully responsive and optimized for all screen sizes (mobile, tablet, desktop).
b. Background image should scale properly across devices.
c. Ensure text, buttons, and other content remain legible and well-placed on small screens.

3. Customization:

a. Props for customizing:
b. Background (image, color).
c. Text alignment (left, center, right).
d. Button styles and actions.
e. Provide flexible options for changing font sizes, colors, and button layouts.

4. Performance:

a. Optimize the component for fast loading, ensuring that background images (if any) load efficiently without delaying the rest of the page.
b. Use lazy loading for images to ensure performance isn't hindered on slower networks.

5. Accessibility:

a. Ensure that the component is fully accessible with screen readers.
b. Use appropriate aria-labels and other accessibility features where necessary.

6. Implementation:

a. Should be written in a way that works seamlessly with both JavaScript and TypeScript.
b. Follow best practices to align with Auraui’s existing design system.

This Hero component will serve as a foundational section for many webpages and will enhance the flexibility and appeal of the Auraui component library.