{"_id":"@ar-dacity/ardacity-hero-one","name":"@ar-dacity/ardacity-hero-one","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ar-dacity/ardacity-hero-one","version":"1.0.0","description":"Animated hero section with Arweave wallet integration for React applications","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build","postinstall":"node ./scripts/install.js"},"keywords":["react","ui","components","animation","hero","landing","framer-motion","arweave","wallet"],"author":{"name":"ArDacity"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=4.0.0"},"devDependencies":{"@types/node":"^20.10.5","@types/react":"^18.2.45","typescript":"^5.3.3"},"_id":"@ar-dacity/ardacity-hero-one@1.0.0","gitHead":"ead02eb4d9b0977ef4e8a6a7a0f8a4d99a9d33c4","_nodeVersion":"20.12.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-vZvUwqh50T98uEct8PZp8eOKFtKLaA72tBdu+3wIn7+6aAedfV3Epfy9c5CfyFlCd/ptEXk6QB/Xvka+S1CkdA==","shasum":"2cfbebb45586a1bc703669e659ba26f908907d01","tarball":"https://registry.npmjs.org/@ar-dacity/ardacity-hero-one/-/ardacity-hero-one-1.0.0.tgz","fileCount":7,"unpackedSize":15724,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICdt7MiYRe/z4Rqrpu3ysqE8tFjXvitjaOZSaRachs+mAiEAilv/+eLT4BSITFzSXR01T6pNfeoOO87hKAGr4iDp13o="}]},"_npmUser":{"name":"ruffledzest","email":"vibhanshalok@gmail.com"},"directories":{},"maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ardacity-hero-one_1.0.0_1745580637129_0.8730266297000167"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-25T11:30:37.055Z","1.0.0":"2025-04-25T11:30:37.301Z","modified":"2025-04-25T11:30:37.571Z"},"maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"description":"Animated hero section with Arweave wallet integration for React applications","keywords":["react","ui","components","animation","hero","landing","framer-motion","arweave","wallet"],"author":{"name":"ArDacity"},"license":"MIT","readme":"# ArDacity Hero One\r\n\r\nA stunning, animated hero section with Arweave wallet integration for React applications.\r\n\r\n## Features\r\n\r\n- ✨ Beautiful animated text and graphics using Framer Motion\r\n- 🔒 Built-in Arweave wallet connection (using arweaveUtils)\r\n- 🎨 Sleek dark theme with clean animations\r\n- 📱 Fully responsive for all devices\r\n- 🔧 Easy to customize and extend\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @ar-dacity/ardacity-hero-one\r\n# or\r\nyarn add @ar-dacity/ardacity-hero-one\r\n```\r\n\r\n### Dependencies\r\n\r\nThis component requires the following dependencies:\r\n\r\n```bash\r\nnpm install framer-motion\r\n# or\r\nyarn add framer-motion\r\n```\r\n\r\nDuring installation, the package will automatically copy the necessary components to your project's `/src/components/ArDacityUi/HeroOne/` directory.\r\n\r\n### Arweave Utils Setup\r\n\r\nThis component requires arweaveUtils functions. Make sure you have the following utility functions implemented in your project:\r\n\r\n1. Create a file at `src/arweaveUtils.js` with the following functions:\r\n```javascript\r\n// Basic implementation example - customize according to your needs\r\nexport const connectWallet = async () => {\r\n  // Implementation depends on your Arweave library\r\n  // Example using arweave-js or arconnect\r\n  if (window.arweaveWallet) {\r\n    await window.arweaveWallet.connect(['ACCESS_ADDRESS', 'SIGN_TRANSACTION']);\r\n    return true;\r\n  }\r\n  return false;\r\n};\r\n\r\nexport const disconnectWallet = async () => {\r\n  if (window.arweaveWallet) {\r\n    await window.arweaveWallet.disconnect();\r\n    return true;\r\n  }\r\n  return false;\r\n};\r\n\r\nexport const getWalletAddress = async () => {\r\n  if (window.arweaveWallet) {\r\n    return await window.arweaveWallet.getActiveAddress();\r\n  }\r\n  return '';\r\n};\r\n```\r\n\r\n## Usage\r\n\r\nSimply import and use the component in your application:\r\n\r\n```jsx\r\nimport { HeroOne } from './components/ArDacityUi/HeroOne';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <HeroOne />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Customization\r\n\r\n### Replacing Images\r\n\r\nThe component uses placeholder images from the internet. You can replace them with your own images by editing the component file after installation:\r\n\r\n1. Navigate to `src/components/ArDacityUi/HeroOne/HeroOne.jsx`\r\n2. Replace the image URLs with your own:\r\n\r\n```jsx\r\n// From\r\n<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\" />\r\n\r\n// To\r\n<img src=\"/your-image-path.png\" alt=\"Dancing Figure\" className=\"w-full h-full object-contain\" />\r\n```\r\n\r\n### Modifying Text\r\n\r\nYou can change the displayed text by editing the component:\r\n\r\n```jsx\r\n// From\r\n<motion.h1>CRAFT</motion.h1>\r\n<motion.h1>YOUR OWN</motion.h1>\r\n<motion.h1>DESIGN</motion.h1>\r\n\r\n// To\r\n<motion.h1>YOUR</motion.h1>\r\n<motion.h1>CUSTOM</motion.h1>\r\n<motion.h1>TEXT</motion.h1>\r\n```\r\n\r\n## Animation Details\r\n\r\nThis component uses Framer Motion to create fluid animations:\r\n\r\n- Text animates in from the sides\r\n- Central image springs up from below\r\n- Banner unrolls from right to left\r\n- Buttons fade in last\r\n\r\n## Browser Support\r\n\r\n- Chrome (latest)\r\n- Firefox (latest)\r\n- Safari (latest)\r\n- Edge (latest)\r\n\r\n## Development\r\n\r\nIf you want to contribute to this project:\r\n\r\n1. Clone the repository\r\n2. Install dependencies: `npm install`\r\n3. Make your changes\r\n4. Build the package: `npm run build`\r\n5. Test your changes\r\n6. Submit a pull request\r\n\r\n## License\r\n\r\nMIT © ArDacity ","readmeFilename":"README.md","_rev":"1-148f9651379e6b5b4d6a15575b2e9124"}