React Neonic Hero

A stunning, futuristic, animated hero section component for React applications.

Features

• ✨ Futuristic neon styling with customizable colors
• 🎬 Multiple animation styles and speeds
• 📱 Fully responsive design
• 🌓 Dark and light mode support
• 🎛️ Extensive customization options
• 🔧 TypeScript support with full type definitions
• ⚡ Optimized performance

Installation

```bash npm install react-neonic-hero

or

yarn add react-neonic-hero ```

Usage

```jsx import NeonicHero from 'react-neonic-hero';

function App() { return ( ); } ```

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | "Build the future with stunning UI" | Main heading text | | subtitle | string | "NEXT GENERATION" | Small text displayed above the title | | description | string | "Create immersive digital experiences..." | Paragraph text below the title | | primaryButtonText | string | "Get Started" | Text for the primary CTA button | | primaryButtonLink | string | "#" | URL for the primary button | | secondaryButtonText | string | "Learn More" | Text for the secondary button | | secondaryButtonLink | string | "#" | URL for the secondary button | | backgroundImage | string | "https://images.unsplash.com/..." | URL for the background image | | showGithubButton | boolean | true | Whether to show the GitHub button | | githubLink | string | "https://github.com" | URL for the GitHub button | | glowColor | string | "#0ea5e9" | Color for the neon glow effects | | textGlowColor | string | "#0ea5e9" | Color for the text glow effects | | animationSpeed | "slow" | "medium" | "fast" | "medium" | Speed of the animations | | animationStyle | "fade" | "slide" | "scale" | "bounce" | "fade" | Style of the animations | | layout | "centered" | "left" | "right" | "centered" | Alignment of the content | | darkMode | boolean | true | Whether to use dark mode styling | | onPrimaryButtonClick | () => void | undefined | Callback for primary button click | | onSecondaryButtonClick | () => void | undefined | Callback for secondary button click |

Examples

Basic Example

```jsx import NeonicHero from 'react-neonic-hero';

function BasicExample() { return ( ); } ```

Custom Styling

```jsx import NeonicHero from 'react-neonic-hero';

function CustomExample() { return ( ); } ```

With Event Handlers

```jsx import NeonicHero from 'react-neonic-hero';

function EventHandlersExample() { const handlePrimaryClick = () => { console.log('Primary button clicked'); // Add your custom logic here };

const handleSecondaryClick = () => { console.log('Secondary button clicked'); // Add your custom logic here };

return ( ); } ```

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Mubashir Ali] ```

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};