HERO Personal Agent Website

A modern, emotional dark-mode website for HERO Personal Agent platform built with React, Tailwind CSS, and Framer Motion.

🌟 Features

• Dark Mode Only - Professional dark theme with blue, purple, and cyan accents
• Emotional Design - Cyberpunk aesthetics with gradient text effects and smooth animations
• Large Full-Width Images - Impactful visuals throughout the site
• Responsive Design - Works perfectly on desktop and mobile
• Five Complete Pages - Home, How, Get Started, Technology, and Blog
• Modern Tech Stack - React 18, Tailwind CSS, Framer Motion, Lucide Icons

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• pnpm (will be installed automatically if not present)

Installation

1. Extract the files to your desired directory
2. Run the installation script:

   chmod +x install.sh start.sh
   ./install.sh
   

3. Start the development server:

   ./start.sh
   

4. Open your browser to http://localhost:5173

📁 Project Structure

hero-website/
├── src/
│   ├── pages/              # Website pages
│   │   ├── Home.jsx        # Landing page with hero section
│   │   ├── How.jsx         # How HERO works
│   │   ├── GetStarted.jsx  # Pricing and signup ($20/month)
│   │   ├── Technology.jsx  # Technical details and comparisons
│   │   └── Blog.jsx        # Blog section with articles
│   ├── components/         # Reusable UI components
│   │   ├── HeroSection.jsx # Hero section component
│   │   ├── Section.jsx     # Layout section wrapper
│   │   ├── FeatureCard.jsx # Feature display cards
│   │   └── Navigation.jsx  # Site navigation
│   ├── assets/            # Images and media files
│   ├── App.jsx            # Main application component
│   ├── App.css            # Custom styles and animations
│   └── main.jsx           # Application entry point
├── public/                # Static assets
├── install.sh            # Installation script
├── start.sh              # Development server script
└── README.md             # This file

🎨 Customization

Content Updates

• Home Page: Edit src/pages/Home.jsx for main messaging
• Pricing: Update pricing in src/pages/GetStarted.jsx
• Technology: Modify technical details in src/pages/Technology.jsx
• Blog: Add/edit blog posts in src/pages/Blog.jsx

Styling

• Colors: Modify color scheme in src/App.css
• Animations: Customize Framer Motion animations in components
• Layout: Adjust responsive breakpoints in Tailwind classes

Images

• Replace images in src/assets/ directory
• Update image imports in page components
• Maintain aspect ratios for best results

🛠 Development Commands

# Install dependencies
./install.sh

# Start development server
./start.sh

# Build for production
pnpm run build

# Preview production build
pnpm run preview

🌐 Deployment

The website is built as a static React application and can be deployed to any static hosting service:

1. Build the project:

   pnpm run build
   

2. Deploy the dist/ folder to your hosting service

📦 Technologies Used

• React 18 - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Smooth animations and transitions
• Lucide React - Beautiful icon library
• React Router - Client-side routing
• shadcn/ui - High-quality UI components

🎯 Key Pages

1. HOME - Emotional hero section introducing HERO Personal Agent
2. HOW - Technical explanation of HERO's capabilities
3. GET STARTED - Clear pricing ($20/month) and signup process
4. TECHNOLOGY - Deep technical details and comparisons
5. BLOG - Modern blog layout with featured articles

🔧 Troubleshooting

Common Issues

1. White screen on load:

   • Ensure all dependencies are installed: ./install.sh
   • Check browser console for errors

2. Images not loading:

   • Verify images are in src/assets/ directory
   • Check import paths in components

3. Styling issues:

   • Ensure Tailwind CSS is properly configured
   • Check src/App.css for custom styles

Getting Help

• Check the browser console for error messages
• Ensure Node.js version is 16 or higher
• Verify all dependencies installed correctly

📄 License

This project is created for HERO Personal Agent platform. Customize as needed for your use case.

---

Built with ❤️ for digital sovereignty and privacy