Clutch Protocol Website

Official website for Clutch Protocol - Decentralized ride-sharing blockchain.

🌐 Live Site

• Production: clutchprotocol.io
• GitHub Pages: clutchprotocol.github.io

🚀 Features

• Responsive Design: Mobile-first approach with modern UI/UX
• Performance Optimized: Fast loading with lazy loading and efficient animations
• SEO Friendly: Comprehensive meta tags and structured data
• Accessibility: WCAG compliant with proper semantic HTML
• Interactive Elements: Smooth scrolling, animations, and micro-interactions

🛠️ Technology Stack

• Frontend: Pure HTML5, CSS3, and JavaScript (ES6+)
• Styling: Custom CSS with CSS Grid and Flexbox
• Icons: Font Awesome 6
• Fonts: Inter from Google Fonts
• Hosting: GitHub Pages with custom domain

📁 Project Structure

clutchprotocol.github.io/
├── index.html          # Main HTML file
├── styles.css          # All CSS styles
├── script.js           # JavaScript functionality
├── CNAME              # Custom domain configuration
├── .nojekyll          # Disable Jekyll processing
├── favicon.ico        # Site favicon
└── README.md          # This file

🎨 Design System

Colors

• Primary: #667eea (Gradient start)
• Secondary: #764ba2 (Gradient end)
• Background: #f8f9fa
• Text: #1a1a1a (Dark) / #666 (Light)

Typography

• Font Family: Inter
• Headings: 600-700 weight
• Body: 400 weight
• Code: Monospace

Components

• Navigation with mobile hamburger menu
• Hero section with animated blockchain visualization
• Feature cards with hover effects
• Fee comparison charts
• Team member cards
• Community action cards

🚀 Development

Local Development

# Clone the repository
git clone https://github.com/clutchprotocol/clutchprotocol.github.io.git

# Navigate to directory
cd clutchprotocol.github.io

# Serve locally (using any static server)
# Python 3
python -m http.server 8000

# Node.js (with serve package)
npx serve .

# VS Code Live Server extension
# Right-click index.html -> "Open with Live Server"

Deployment

This site is automatically deployed via GitHub Pages when changes are pushed to the main branch.

🌍 DNS Configuration

To point clutchprotocol.io to GitHub Pages:

1. A Records (for apex domain):

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153
   

2. CNAME Record (for www):

   www.clutchprotocol.io -> clutchprotocol.github.io
   

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🔧 Features & Functionality

Interactive Elements

• Mobile-responsive navigation
• Smooth scrolling between sections
• Intersection Observer animations
• Blockchain block hover effects
• Timeline progress indicators

Performance Features

• Lazy loading for images
• Optimized CSS animations
• Minimal JavaScript bundle
• Efficient DOM manipulation

SEO & Meta

• Open Graph tags for social sharing
• Twitter Card meta tags
• Structured data markup
• Semantic HTML structure

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Commit Convention

Use conventional commits:

• feat: - New features
• fix: - Bug fixes
• docs: - Documentation updates
• style: - Code formatting
• refactor: - Code refactoring
• perf: - Performance improvements

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Main Repository: Clutch Protocol
• Documentation: docs.clutchprotocol.io
• Demo App: demo.clutchprotocol.io

📧 Contact

• Email: hello@clutchprotocol.io
• GitHub: @clutchprotocol

---

Built with ❤️ for the decentralized future