Feature Component
The Feature component is a React component designed to display product features in a visually appealing layout. It supports an image, text content, and an optional call-to-action button, making it ideal for landing pages or product showcases.
Importing the Component
To use the Feature component in your React application, import it as follows:
import { Feature } from '@/components/Feature';
Component Props
The Feature component accepts the following props:
Prop | Type | Description |
---|---|---|
category | string | The category or label for the feature |
title | string | The main title of the feature |
description | string OR React.ReactNode | The description of the feature (can be text or a React element) |
imageUrl | string | The URL of the image to display |
showCta | boolean | Whether to show the call-to-action button |
Basic Usage
Here's a basic example of how to use the Feature component:
import { Feature } from '@/components/Feature';
<Feature
category='Analytics'
title='Powerful Insights'
description='Gain deep insights into your business with our advanced analytics tools.'
imageUrl='/images/analytics-feature.jpg'
showCta={true}
/>;
Functionality
The Feature component provides the following functionality:
- Displays a feature with a category, title, and description.
- Shows an image related to the feature.
- Optionally renders a call-to-action button.
- Uses responsive design for different screen sizes.
- Integrates with a custom hook (
useGetStarted
) for handling the CTA button click.
Styling
The component uses Tailwind CSS for styling. Key styling features include:
- Responsive layout using flexbox, switching from column to row layout on larger screens.
- Custom text colors and sizes for different elements.
- Rounded corners and background colors for the image container and button.
- Hover effects on the CTA button.
- Use of the
cn
utility function for conditional class name application.
Dependencies
This component relies on the following:
- React
- react-icons (for the TbArrowRight icon)
- A custom Button component from "@/components/ui/button"
- A custom hook
useGetStarted
from "@/hooks/use-get-started" - A utility function
cn
from "@/lib/utils"
Customization
To customize the Feature component, you can:
- Modify the Tailwind CSS classes to change the appearance.
- Adjust the text content and styling of the category, title, and description.
- Customize the Button component for a different CTA style.
- Change the icon used in the CTA button.
Accessibility
To ensure accessibility:
- The image has an alt text, but it could be more descriptive. Consider passing a separate
imageAlt
prop for better accessibility. - The Button component should handle proper ARIA attributes.
- Ensure sufficient color contrast for text readability, especially for the category text.
Best Practices and Improvements
- Consider adding an
imageAlt
prop for more descriptive alt text on the image. - Implement error handling for cases where the image fails to load.
- Add PropTypes or TypeScript prop validation for better type safety.
- Consider making the CTA button text customizable through props.
Example Usage
Here's an example of how you might use multiple Feature components in a page:
import { Feature } from '@/components/Feature';
const FeaturesPage = () => {
const features = [
{
category: 'Analytics',
title: 'Powerful Insights',
description:
'Gain deep insights into your business with our advanced analytics tools.',
imageUrl: '/images/analytics-feature.jpg',
showCta: false,
},
{
category: 'Automation',
title: 'Streamline Your Workflow',
description: 'Automate repetitive tasks and focus on what matters most.',
imageUrl: '/images/automation-feature.jpg',
showCta: true,
},
{
category: 'Integration',
title: 'Connect Your Tools',
description:
'Seamlessly integrate with your favorite tools and platforms.',
imageUrl: '/images/integration-feature.jpg',
showCta: false,
},
];
return (
<div className='container mx-auto py-8'>
<h1 className='text-4xl font-bold text-center mb-12'>Our Features</h1>
{features.map((feature, index) => (
<Feature key={index} {...feature} />
))}
</div>
);
};
export default FeaturesPage;
This example demonstrates how to use multiple Feature components to create a comprehensive features page, showcasing different aspects of a product or service.
By using the Feature component, you can easily create visually appealing and responsive feature showcases in your React application. Remember to customize the content and styling to fit your specific use case and design requirements.