# 🌐 Sphere Chat Landing Page Template

![Sphere Chat](https://img.shields.io/badge/Status-Live-success)
![Version](https://img.shields.io/badge/Version-1.0.0-blue)
![License](https://img.shields.io/badge/License-MIT-green)

> A modern, interactive landing page for Sphere - the next generation chat platform featuring stunning 3D animations and a sleek user interface.

![Sphere Chat Preview](/preview/screenshot.png)

## ✨ Features

- **Interactive 3D Background** - Engaging Three.js powered animations
- **Modern Design** - Clean, minimalist aesthetic with gradient accents
- **Responsive Layout** - Seamlessly adapts to all screen sizes
- **Smooth Animations** - GSAP-powered scroll animations and transitions
- **Performance Optimized** - Hardware-accelerated animations and efficient rendering
- **Cross-Browser Compatible** - Works flawlessly across all modern browsers

## 🛠️ Built With

- HTML5
- CSS3
- JavaScript
- [Three.js](https://threejs.org/) - 3D graphics
- [GSAP](https://greensock.com/gsap/) - Animations
- Custom shader materials
- Modern CSS features including:
  - CSS Grid
  - Flexbox
  - Custom Properties
  - Backdrop Filter
  - CSS Animations

## 🏗️ Project Structure

```
sphere-chat-landing/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
├── assets/
│   └── images/
├── preview/
│   └── screenshot.png
└── README.md
```

## 🚦 Getting Started

1. Clone the repository:
```bash
git clone https://github.com/ddosnotification/sphere-chat-landing.git
```

2. Navigate to the project directory:
```bash
cd sphere-chat-landing
```

3. Open `index.html` in your browser or use a local server:
```bash
# Using Python
python -m http.server 8000

# Using Node.js
npx serve
```

4. Visit `http://localhost:8000` in your browser

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🎨 Color Palette

| Color      | Hex Code  | Usage                    |
|------------|-----------|--------------------------|
| Primary    | `#6366F1` | Main brand color        |
| Secondary  | `#14B8A6` | Accents and highlights  |
| Accent     | `#F43F5E` | Call-to-action elements |
| Dark       | `#1E293B` | Text and backgrounds    |
| Light      | `#F8FAFC` | Background and text     |

## 🤝 Contributing

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

## 📝 License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

## 👏 Acknowledgments

- Three.js documentation and examples
- GSAP animation library
- Modern landing page design inspiration
- The open-source community

## 📧 Contact

[@ddosnotification](https://x.com/ddosntfcion)

Project Link: [https://github.com/ddosnotification/sphere-chat-landing](https://github.com/ddosnotification/sphere-chat-landing)

---
Made with ❤️ for better web experiences