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:
- Displays a headline with a gradient text effect.
- Shows a description of the product or service.
- Renders a call-to-action button that changes based on user login status.
- Provides a "Talk to us" link for booking demos.
- Showcases user avatars and a testimonial (optional).
- Displays a hero image with a background gradient effect.
- 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:
- Modify the
SiteConfig
object to update the Calendly link. - Update the
Routes
object to change the URLs for different pages. - Adjust the Tailwind CSS classes to modify the styling.
- Replace the placeholder image with your own hero image.
- Customize the headline, description, and button text as needed.
Accessibility
To improve accessibility:
- Add appropriate
aria-label
attributes to buttons and links that only contain icons. - Ensure sufficient color contrast for text elements, especially the gradient text.
- Provide meaningful alt text for the hero image and user avatars.
Best Practices and Improvements
- Replace the placeholder image URL with an actual image path.
- Implement proper error handling for image loading failures.
- Consider adding animation effects for a more engaging user experience.
- Optimize the hero image for different screen sizes and resolutions.
- 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.