# Mantrana Landing Page

A beautiful, responsive landing page for the Mantrana social platform with download links and feature showcase.

## 🌟 Features

### 📱 **Download Options**
- **Progressive Web App (PWA)** - Install directly from browser
- **Android APK** - Native Android application download
- **Direct links** to both web app and APK file

### 🎨 **Design Features**
- **Modern gradient design** with purple/blue theme
- **Responsive layout** - works on all devices
- **Interactive phone mockup** showing app preview
- **Smooth animations** and hover effects
- **Professional typography** with Inter font

### 📋 **Content Sections**
- **Hero section** with call-to-action buttons
- **Features showcase** with 6 key features
- **Download section** with installation options
- **Tech stack** display
- **Footer** with links and social media

### ⚡ **Performance**
- **Optimized images** and assets
- **Smooth scrolling** navigation
- **Lazy loading** for better performance
- **Mobile-first** responsive design

## 🚀 Usage

### Local Development
1. Open `index.html` in your browser
2. Or serve with a local server:
   ```bash
   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using PHP
   php -S localhost:8000
   ```

### Deployment
Upload the entire `landing-page` folder to your web server or hosting service.

## 📁 File Structure

```
landing-page/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and animations
├── script.js           # JavaScript functionality
└── README.md          # This file
```

## 🔗 Links and Downloads

The landing page includes:
- **Web App Link**: Points to `../index.html` (main Mantrana app)
- **APK Download**: Points to `../android/app/build/outputs/apk/release/app-release.apk`
- **GitHub Repository**: Links to the source code
- **Documentation**: Links to project README

## 🎯 Key Features Highlighted

1. **✨ Authentic Expression** - Share thoughts with text, images, and emojis
2. **🎭 Mood Tracking** - Express feelings with mood indicators
3. **🤝 Community Support** - Connect through likes, comments, and interactions
4. **📱 Mobile First** - PWA support and native Android app
5. **🔒 Privacy Focused** - Username-only authentication
6. **⚡ Offline Ready** - Works offline with PWA technology

## 🛠️ Customization

### Colors and Branding
- Primary gradient: `#8B5CF6` to `#3B82F6` (purple to blue)
- Accent colors: `#fbbf24` to `#f59e0b` (golden yellow)
- Background: `#667eea` to `#764ba2` (hero gradient)

### Content Updates
- Edit `index.html` for content changes
- Update `styles.css` for design modifications
- Modify `script.js` for functionality changes

### Analytics Integration
The landing page includes placeholder analytics tracking. Integrate with:
- Google Analytics 4
- Custom analytics services
- Event tracking for downloads and interactions

## 📱 Mobile Optimization

- **Responsive breakpoints**: 768px and 480px
- **Touch-friendly buttons** with proper sizing
- **Mobile navigation** (hidden on small screens)
- **Optimized images** for different screen densities

## 🔧 Technical Details

### Dependencies
- **Inter font** from Google Fonts
- **Pure CSS** animations and effects
- **Vanilla JavaScript** - no frameworks required
- **SVG icons** for crisp display

### Browser Support
- **Modern browsers** (Chrome, Firefox, Safari, Edge)
- **Mobile browsers** (iOS Safari, Chrome Mobile)
- **Progressive enhancement** for older browsers

## 📊 Performance Metrics

- **Fast loading** with optimized assets
- **Smooth animations** at 60fps
- **Accessible** with proper ARIA labels
- **SEO optimized** with meta tags and structured data

## 🚀 Deployment Options

### Static Hosting
- **Netlify**: Drag and drop deployment
- **Vercel**: Git-based deployment
- **GitHub Pages**: Direct from repository
- **Firebase Hosting**: Google's hosting service

### CDN Integration
- Optimize images with services like Cloudinary
- Use CDN for faster global delivery
- Enable compression and caching

---

**Made with ❤️ for Mantrana - Where thoughts become connections**