Hero

The Hero component serves as the introductory section of the landing page. It provides a bold headline, a brief description of the application, a call-to-action button, a special offer notice, a star rating visual, and a prominent hero image.

Props

The Hero component does not accept any props.

Dependencies

• React Icons: Uses react-icons for the app icon and star rating visuals.

• Internal Components:

  • CheckoutButton: A reusable button component configured here to include an icon and custom dimensions.

• Image Assets:

  • heroImg: An imported image that visually represents the application in the hero section.

Key Style Classes

• Responsive Layout:

  • flex flex-col lg:flex-row: Arranges the content in a column on small screens and a row on larger screens.

  • text-center lg:text-left: Centers text on small screens and aligns left on larger screens.

• Text Styling:

  • Headline: text-3xl sm:text-4xl lg:text-6xl font-semibold leading-tight for a responsive and prominent heading.

  • Description: text-neutral-500 text-sm md:text-lg font-light for a soft, understated description text.

• Button Styling: Uses a CheckoutButton styled with an icon, and width and height props to control dimensions.

• Additional Visuals:

  • Star Rating: FaStar icons arranged horizontally to signify high user ratings.

  • Launch Offer: A green blinking dot with a special launch discount to attract user attention.

Usage Example

// Hero component can be used directly within the Landing component.
<Hero />

Additional Notes

• Incentive Text: The special launch offer text can be customized to highlight a promotional deal.

• Hero Image: The heroImg is styled to be responsive, adapting its width for various screen sizes while maintaining quality.

• Star Rating: Displays a row of five stars to reinforce a positive user perception.

---

This covers the Hero component’s documentation.