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] ```

1module.exports = {
2  plugins: {
3    tailwindcss: {},
4    autoprefixer: {},
5  },
6};