Hero Component

The Hero component is a versatile and customizable section typically used at the top of a landing page. It features a compelling headline, description, call-to-action buttons, user testimonials, and an image.

Importing the Component

To use the Hero component in your Next.js application, import it as follows:

import { Hero } from '@/components/Hero';

Basic Usage

Here's a basic example of how to use the Hero component:

<Hero showUsers={true} showCta={true} showBookDemo={true} />

Props

The Hero component accepts the following props:

Prop	Type	Default	Description
showUsers	boolean	true	Whether to display the user avatars and testimonial
showCta	boolean	true	Whether to show the call-to-action button
showBookDemo	boolean	true	Whether to show the "Talk to us" link

Functionality

The Hero component provides the following functionality:

1. Displays a headline with a gradient text effect.
2. Shows a description of the product or service.
3. Renders a call-to-action button that changes based on user login status.
4. Provides a "Talk to us" link for booking demos.
5. Showcases user avatars and a testimonial (optional).
6. Displays a hero image with a background gradient effect.
7. Implements responsive design for various screen sizes.

State Management

The component uses React's useState hook to manage the loading state of the CTA button:

const [isLoadingCta, setLoadingCta] = useState(false);

It also utilizes the useIsLogged custom hook to manage user authentication state:

const { user, isLogged, isAdmin } = useIsLogged();

Styling

The component uses Tailwind CSS for styling. Key styling features include:

• Responsive layout using flexbox and custom breakpoints.
• Gradient text effect for the headline.
• Custom button styles with hover effects.
• Overlapping user avatars with border effects.
• Background gradient effect for the hero image.

Customization

To customize the Hero component:

1. Modify the SiteConfig object to update the Calendly link.
2. Update the Routes object to change the URLs for different pages.
3. Adjust the Tailwind CSS classes to modify the styling.
4. Replace the placeholder image with your own hero image.
5. Customize the headline, description, and button text as needed.

Accessibility

To improve accessibility:

1. Add appropriate aria-label attributes to buttons and links that only contain icons.
2. Ensure sufficient color contrast for text elements, especially the gradient text.
3. Provide meaningful alt text for the hero image and user avatars.

Best Practices and Improvements

1. Replace the placeholder image URL with an actual image path.
2. Implement proper error handling for image loading failures.
3. Consider adding animation effects for a more engaging user experience.
4. Optimize the hero image for different screen sizes and resolutions.
5. Implement internationalization (i18n) for multi-language support.

Example Usage

Here's an example of how you might use the Hero component in a landing page:

import { Hero } from '@/components/Hero';

const LandingPage = () => {
  return (
    <div>
      <Hero showUsers={true} showCta={true} showBookDemo={true} />
      {/* Other sections of your landing page */}
    </div>
  );
};

export default LandingPage;

This example demonstrates how to use the Hero component at the top of a landing page with all features enabled.

---

By using the Hero component, you can easily add an attractive and customizable hero section to your Next.js application's landing page. Remember to update the content, images, and styling to match your specific brand and design requirements.