ClickToActionBox Component

The ClickToActionBox component is a React component designed to encourage user engagement by providing a prominent call-to-action section. It offers options to try the service for free or book a demo, along with highlighting key features.

Importing the Component

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

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

Basic Usage

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

<ClickToActionBox />

Functionality

The ClickToActionBox component provides the following functionality:

1. Displays a prominent call-to-action section with a gradient background.
2. Offers two main actions: "Try FREE now" and "Book a demo".
3. Highlights key features of the service.
4. Handles user authentication state to direct users to the appropriate dashboard.

State Management

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

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

User Authentication

The component uses a custom hook useIsLogged to determine the user's authentication status and role:

const { user, isAdmin } = useIsLogged();

Navigation

The component uses Next.js's useRouter hook for navigation:

const router = useRouter();

const onGetStartedClick = () => {
  setLoadingCta(true);
  if (user) {
    if (isAdmin) {
      router.push(Routes.protected.admin.dashboard);
    } else {
      router.push(Routes.protected.user.dashboard);
    }
    return;
  }
  router.push(Routes.signup);
};

UI Components

The component uses the following UI components:

• Button from @/components/ui/button
• Icons from react-icons/tb

Styling

The component uses Tailwind CSS for styling:

• Responsive design with different text sizes for various screen sizes
• Gradient background for the main container
• Flexbox layout for arranging elements
• Custom hover effects for buttons

Customization

To customize the ClickToActionBox component:

1. Modify the Tailwind classes to adjust the layout, colors, and spacing.
2. Update the text content to match your service's messaging.
3. Adjust the SiteConfig object to change the site name and Calendly link.
4. Modify the Routes object to change the navigation paths.

Accessibility

To improve accessibility:

1. Add aria-label attributes to the buttons and links for better screen reader support.
2. Ensure color contrast ratios meet WCAG standards for better readability.
3. Consider adding keyboard navigation support for the CTA buttons.

Best Practices

1. Implement error handling for cases where navigation might fail.
2. Consider adding loading indicators or disabling buttons during navigation.
3. Ensure that the SiteConfig and Routes objects are properly configured.

Example Usage

Here's an example of how you might use the ClickToActionBox component in a Next.js page:

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

export default function HomePage() {
  return (
    <div className='container mx-auto px-4'>
      <h1 className='text-4xl font-bold mb-8'>Welcome to Our Service</h1>
      <p className='text-xl mb-12'>
        Discover how we can help you grow your business.
      </p>
      <ClickToActionBox />
    </div>
  );
}

This example demonstrates how to integrate the ClickToActionBox component into a home page, providing a clear call-to-action for visitors.

---

By using the ClickToActionBox component, you can create an engaging and visually appealing call-to-action section in your Next.js application. Remember to customize the content and styling to match your brand and service offerings.