# 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**:
   ```bash
   chmod +x install.sh start.sh
   ./install.sh
   ```
3. **Start the development server**:
   ```bash
   ./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

```bash
# 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**:
   ```bash
   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**