FinalMessage

The FinalMessage component serves as a concluding section on the landing page, prompting users to take action with a call-to-action (CTA) button. It includes a title, subtitle, optional icon, and a CheckoutButton to encourage user engagement.

Props

Prop	Type	Description
title	string	Main title text, displayed prominently at the top of the component.
subtitle	string	Subtitle text, providing additional context or encouragement.
icon	any	Optional icon displayed above the title, adding visual emphasis.

Dependencies

• React Icons: Uses IoIosApps as an optional icon within the CheckoutButton.

• Internal Components:

  • CheckoutButton: The CTA button that initiates the checkout process.

Key Style Classes

• Container Styles:

  • w-full flex justify-center items-center: Centers the FinalMessage content within the page.

  • w-fit h-fit flex flex-col gap-9: Ensures that the container adjusts to fit the content, with spacing (gap-9) for layout separation.

• Icon Positioning:

  • absolute top-[-35px] right-2 rotate-[10deg]: Positions the optional icon with a slight rotation for a dynamic, angled effect.

• Text Styling:

  • text-3xl md:text-5xl font-semibold text-center: Sizes the main title responsively and centers it within the component.

  • Subtitle: Styled with text-center for consistent alignment beneath the title.

Usage Example

// Example usage of FinalMessage component as a CTA section
<FinalMessage
  title="Let's get started now."
  subtitle="Take advantage of our exclusive offer and begin your journey with us."
  icon={<YourIconComponent />}
/>

Additional Notes

• Checkout Button:

  • The CheckoutButton has containsIcon set to true, displaying an icon within the button for additional emphasis.
  • The button content is set to "Get Started" to align with the CTA theme.

• Responsive Design:

  • The component's title and subtitle scale for different screen sizes, ensuring readability and visual appeal across devices.

• Icon Customization: The icon prop allows flexibility in adding custom icons above the title, enhancing the component’s visual emphasis.

---

This documentation covers the FinalMessage component comprehensively.