@ar-dacity/ardacity-landing-page-one

ArDacity Landing Page One

A beautiful landing page component that showcases all ArDacity UI components together with Arweave wallet integration.

Installation

npm install @ar-dacity/ardacity-landing-page-one

This package requires other ArDacity components. Install them as well:

npm install @ar-dacity/ardacity-text-pressure @ar-dacity/ardacity-scroll-reveal @ar-dacity/ardacity-pixel-transition @ar-dacity/ardacity-splash-cursor @ar-dacity/ardacity-hyperspeed @ar-dacity/ardacity-aurora @permaweb/aoconnect

Features

• Responsive design
• Arweave wallet integration
• Showcases all ArDacity UI components:
  • TextPressure
  • ScrollReveal
  • PixelTransition
  • SplashCursor
  • Hyperspeed
  • Aurora

Usage

After installation, the component will be automatically added to your project's components directory.

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

function App() {
  return <LandingPageOne />;
}

Customization

You can customize various aspects of the landing page:

<LandingPageOne
  title="My Awesome Project"
  subtitleLines={[
    "A revolutionary new project",
    "Built on Arweave"
  ]}
  description="This is my amazing project that uses all the ArDacity UI components to create a stunning user experience."
  auroraColorStops={["#FF5733", "#33FF57", "#3357FF"]}
  pixelTransitionImgUrl="https://example.com/my-image.jpg"
  pixelTransitionText="My Custom Text"
/>

Props

Prop	Type	Default	Description
title	string	"ArDacity UI"	Title displayed in the header
subtitleLines	string[]	["A collection of UI components...", "Making Frontend..."]	Array of subtitle lines displayed below the main title
description	string	"ArDacity UI is a collection..."	Main description text shown in the ScrollReveal section
auroraColorStops	string[]	["#3A29FF", "#FF94B4", "#FF3232"]	Color stops for the Aurora effect
pixelTransitionImgUrl	string	"https://images.unsplash.com/..."	URL for the image used in PixelTransition components
pixelTransitionText	string	"Making for AO, On AO"	Text displayed in the second state of PixelTransition components

Requirements

This component requires:

• React 16.8.0 or higher
• React DOM 16.8.0 or higher
• All ArDacity UI component packages
• @permaweb/aoconnect for Arweave integration

License

MIT