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:
- Displays a prominent call-to-action section with a gradient background.
- Offers two main actions: "Try FREE now" and "Book a demo".
- Highlights key features of the service.
- 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:
- Modify the Tailwind classes to adjust the layout, colors, and spacing.
- Update the text content to match your service's messaging.
- Adjust the
SiteConfig
object to change the site name and Calendly link. - Modify the
Routes
object to change the navigation paths.
Accessibility
To improve accessibility:
- Add
aria-label
attributes to the buttons and links for better screen reader support. - Ensure color contrast ratios meet WCAG standards for better readability.
- Consider adding keyboard navigation support for the CTA buttons.
Best Practices
- Implement error handling for cases where navigation might fail.
- Consider adding loading indicators or disabling buttons during navigation.
- Ensure that the
SiteConfig
andRoutes
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.