152 lines
4.6 KiB
Markdown
152 lines
4.6 KiB
Markdown
# 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**
|
|
|