ArDacity Header One

A stylish animated header component with integrated ArDacity Navbar and GSAP animations.

Features

• 🎬 Smooth GSAP animations for text and images
• 🧩 Integrated ArDacity Navbar
• 📱 Fully responsive design
• 🌙 Dark theme by default
• ✨ Customizable content

Installation

npm install @ar-dacity/ardacity-header-one gsap

Usage

import { ArdacityHeaderOne } from '@ar-dacity/ardacity-header-one';
import '@ar-dacity/ardacity-navbar/dist/styles.css'; // Important for navbar styling

function App() {
  return (
    <ArdacityHeaderOne 
      name="Vibhansh Alok"
      title="Web Developer"
      navLinks={[
        { label: 'Home', href: '#', isActive: true },
        { label: 'Projects', href: '#projects' },
        { label: 'About', href: '#about' },
        { label: 'Contact', href: '#contact' }
      ]}
      images={[
        "/path/to/image1.jpg",
        "/path/to/image2.jpg",
        "/path/to/image3.jpg"
      ]}
    />
  );
}

Props

| Prop | Type | Default | Description | |--------------|---------------------|---------------------------|---------------------------------| | name | string | "Vibhansh Alok" | Name to display in the header | | title | string | "Web Developer" | Title or role | | navLinks | array | Basic navigation links | Navigation links | | images | array | Sample images | Image URLs for the header | | className | string | '' | Custom class for the header | | navbarProps| object | undefined | Props for the navbar component |

Customizing Navbar

You can customize the navbar by passing props through the navbarProps property:

<ArdacityHeaderOne 
  navbarProps={{
    variant: 'glass',
    position: 'fixed',
    showWalletButton: true
  }}
/>

Dependencies

This component requires the following dependencies:

• GSAP (for animations)
• ArDacity Navbar (for navigation)

License

MIT