ArDacity Hero One

A stunning, animated hero section with Arweave wallet integration for React applications.

Features

• ✨ Beautiful animated text and graphics using Framer Motion
• 🔒 Built-in Arweave wallet connection (using arweaveUtils)
• 🎨 Sleek dark theme with clean animations
• 📱 Fully responsive for all devices
• 🔧 Easy to customize and extend

Installation

npm install @ar-dacity/ardacity-hero-one
# or
yarn add @ar-dacity/ardacity-hero-one

Dependencies

This component requires the following dependencies:

npm install framer-motion
# or
yarn add framer-motion

During installation, the package will automatically copy the necessary components to your project's /src/components/ArDacityUi/HeroOne/ directory.

Arweave Utils Setup

This component requires arweaveUtils functions. Make sure you have the following utility functions implemented in your project:

1. Create a file at src/arweaveUtils.js with the following functions:

// Basic implementation example - customize according to your needs
export const connectWallet = async () => {
  // Implementation depends on your Arweave library
  // Example using arweave-js or arconnect
  if (window.arweaveWallet) {
    await window.arweaveWallet.connect(['ACCESS_ADDRESS', 'SIGN_TRANSACTION']);
    return true;
  }
  return false;
};

export const disconnectWallet = async () => {
  if (window.arweaveWallet) {
    await window.arweaveWallet.disconnect();
    return true;
  }
  return false;
};

export const getWalletAddress = async () => {
  if (window.arweaveWallet) {
    return await window.arweaveWallet.getActiveAddress();
  }
  return '';
};

Usage

Simply import and use the component in your application:

import { HeroOne } from './components/ArDacityUi/HeroOne';

function App() {
  return (
    <div>
      <HeroOne />
    </div>
  );
}

Customization

Replacing Images

The component uses placeholder images from the internet. You can replace them with your own images by editing the component file after installation:

1. Navigate to src/components/ArDacityUi/HeroOne/HeroOne.jsx
2. Replace the image URLs with your own:

// From
<img src="https://images.unsplash.com/photo-1564106888227-5868decb6ad8?q=80&w=1000&auto=format&fit=crop" alt="Dancing Figure" className="w-full h-full object-contain" />

// To
<img src="/your-image-path.png" alt="Dancing Figure" className="w-full h-full object-contain" />

Modifying Text

You can change the displayed text by editing the component:

// From
<motion.h1>CRAFT</motion.h1>
<motion.h1>YOUR OWN</motion.h1>
<motion.h1>DESIGN</motion.h1>

// To
<motion.h1>YOUR</motion.h1>
<motion.h1>CUSTOM</motion.h1>
<motion.h1>TEXT</motion.h1>

Animation Details

This component uses Framer Motion to create fluid animations:

• Text animates in from the sides
• Central image springs up from below
• Banner unrolls from right to left
• Buttons fade in last

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

If you want to contribute to this project:

1. Clone the repository
2. Install dependencies: npm install
3. Make your changes
4. Build the package: npm run build
5. Test your changes
6. Submit a pull request

License

MIT © ArDacity