Pricing Box

Configuration and Re-usability

import React from 'react';
import FuturisticPriceBox from 'your-path';
 
// Advantages array 
 
const advantages = [
  { icon: '🚀', text: 'Launch faster with pre-built components' },
  { icon: '💻', text: 'Easily customizable with modern tools' },
  { icon: '📦', text: 'Reusable for multiple projects' },
  { icon: '🔒', text: 'Secure and reliable architecture' },
  { icon: '🌍', text: 'Global accessibility and performance' }
];
 
// Component call 
 
const PricingBoxWithAdvantages = () => (
<div className='flex justify-center items-center '>
    <FuturisticPriceBox 
        title='Pro Plan' 
        price={99} 
        period='month' 
        advantages={advantages} // Array Calling
    />
    </div>
);
 
export default PricingBoxWithAdvantages;
 

Dependencies

Usage Methods

1. Pass advantage data as props to make the component more flexible and to allow the inclusion of different advantages.
2. Use a JSON file for advantage data to simplify editing and extension of advantage information.
3. Outsource animation configurations to a separate file or custom hook to improve modularity and reusability.
4. Create separate components for the title, price and CTA to improve readability and reusability of the code.
5. Add the ability to pass customisable CSS classes as props to allow easier and more versatile customisation.
6. Allow customisation of ctaText and onCtaClick as props to easily adapt the behaviour of the CTA button.
7. Use a context to manage the state of hoverEffects and backgroundEffects to avoid passing too many props and make the component more manageable.
8. Define default configurations for animationConfig and customStyles in a configuration file to facilitate global customisation.
9. Add the possibility of disabling hover and background effects via props for finer control over the visual effects of the component.