npm package: @harshit0150/header-footer-components
Description: Reusable Header and Footer components for Next.js projects with Tailwind CSS
Author: harshit0150
Latest version: 1.0.0

# Header Footer Components

A reusable Header and Footer component library for Next.js projects built with Tailwind CSS.

## Features

- 🎨 **Fully Customizable** - Easy to configure with props
- 📱 **Responsive Design** - Works perfectly on all devices
- 🎯 **Multiple Themes** - Light and dark theme support
- ⚡ **Performance Optimized** - Built with modern React patterns
- 🛠️ **Easy Integration** - Simple import and use

## Installation

### Option 1: Install as NPM Package
```bash
npm install @your-org/header-footer-components
```

### Option 2: Copy Components Directly
Copy the `lib/components` folder to your project and import directly.

## Quick Start

### Basic Usage

```jsx
import { Header, Footer } from '@your-org/header-footer-components';

function App() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow">
        {/* Your content here */}
      </main>
      <Footer />
    </div>
  );
}
```

### Advanced Usage with Customization

```jsx
import { Header, Footer } from '@your-org/header-footer-components';

function App() {
  const headerConfig = {
    logo: "My Company",
    logoClassName: "text-2xl font-bold text-purple-600",
    navigationItems: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Services", href: "/services" },
      { label: "Contact", href: "/contact" }
    ],
    ctaButton: { label: "Sign Up", href: "/signup" },
    theme: "light"
  };

  const footerConfig = {
    companyName: "My Company",
    companyDescription: "We create amazing digital experiences.",
    quickLinks: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Services", href: "/services" }
    ],
    services: [
      { label: "Web Development", href: "/services/web" },
      { label: "Mobile Apps", href: "/services/mobile" },
      { label: "Design", href: "/services/design" }
    ],
    contactInfo: {
      address: "123 Main St, City, Country",
      phone: "+1 (555) 123-4567",
      email: "hello@mycompany.com"
    },
    socialLinks: [
      { name: "twitter", href: "https://twitter.com/mycompany", icon: "twitter" },
      { name: "linkedin", href: "https://linkedin.com/company/mycompany", icon: "linkedin" }
    ],
    theme: "dark"
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Header {...headerConfig} />
      <main className="flex-grow">
        {/* Your content here */}
      </main>
      <Footer {...footerConfig} />
    </div>
  );
}
```

## Header Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `logo` | string | "Logo" | Company logo text |
| `logoClassName` | string | "text-2xl font-bold text-blue-600" | CSS classes for logo styling |
| `navigationItems` | array | Default navigation items | Array of navigation links |
| `ctaButton` | object | { label: "Get Started", href: "#" } | Call-to-action button config |
| `className` | string | "" | Additional CSS classes |
| `theme` | string | "light" | Theme: "light" or "dark" |

### Navigation Items Structure
```jsx
navigationItems: [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  // ... more items
]
```

## Footer Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `companyName` | string | "Company Name" | Company name |
| `companyDescription` | string | Default description | Company description |
| `quickLinks` | array | Default links | Quick navigation links |
| `services` | array | Default services | Services offered |
| `contactInfo` | object | Default contact info | Contact information |
| `socialLinks` | array | Default social links | Social media links |
| `legalLinks` | array | Default legal links | Legal page links |
| `copyrightText` | string | Default copyright | Copyright text |
| `className` | string | "" | Additional CSS classes |
| `theme` | string | "dark" | Theme: "dark" or "light" |

### Contact Info Structure
```jsx
contactInfo: {
  address: "123 Business St, City, Country",
  phone: "+1 (555) 123-4567",
  email: "info@company.com"
}
```

### Social Links Structure
```jsx
socialLinks: [
  { name: "twitter", href: "#", icon: "twitter" },
  { name: "facebook", href: "#", icon: "facebook" },
  { name: "linkedin", href: "#", icon: "linkedin" },
  { name: "pinterest", href: "#", icon: "pinterest" }
]
```

## Themes

### Light Theme
- Clean white background
- Dark text colors
- Blue accent colors

### Dark Theme
- Dark background
- Light text colors
- Blue accent colors

## Tailwind CSS Requirements

Make sure your project has Tailwind CSS installed and configured. The components use these Tailwind classes:

- Layout: `flex`, `grid`, `min-h-screen`, `sticky`, `z-50`
- Spacing: `px-4`, `py-2`, `space-x-8`, `gap-8`
- Colors: `bg-white`, `text-gray-700`, `text-blue-600`
- Responsive: `md:flex`, `lg:grid-cols-4`
- Transitions: `transition-colors`, `duration-200`

## Development

### Building the Library
```bash
npm run build:lib
```

### Development Server
```bash
npm run dev
```

## License

MIT License - feel free to use in your projects!

## Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

## Support

If you have any questions or need help, please open an issue on GitHub.