update website

2025-08-24 13:47:03 +03:00
commit 9b5aefeb91
142 changed files with 24225 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,151 @@
+# 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**
+