# 🦖 Dino Game - Solana Token Website

A modern, dino-themed website for your Chrome offline dino game, integrated with Solana blockchain for token-based gameplay.

## ✨ Features

- **Wallet Integration**: Connect Phantom and other Solana wallets
- **Token Payment**: Pay 1 DINO token to play the game
- **Buy Token Button**: Purchase DINO tokens directly from the website
- **Game Integration**: Seamless iframe integration for your Unity game
- **Dino Theme**: Beautiful green and yellow color scheme matching the game
- **Responsive Design**: Works on all devices

## 🚀 Getting Started

### Prerequisites

- Node.js 20.16.0 or higher
- npm or yarn package manager
- Solana wallet (Phantom recommended)

### Installation

1. Clone the repository:
```bash
git clone <your-repo-url>
cd dino_landing_page
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## 🔧 Configuration

### Update Your Wallet Address

In `app/components/GameSection.tsx`, replace the placeholder wallet address:

```typescript
// Replace with your actual wallet address
const RECIPIENT_WALLET = new PublicKey('YOUR_ACTUAL_WALLET_ADDRESS_HERE');
```

### Customize Token Amount

Currently set to 0.001 SOL for demo purposes. To implement actual DINO token transfers:

1. Create your DINO token on Solana
2. Update the transaction logic in `GameSection.tsx`
3. Use SPL Token Program for token transfers

### Integrate Your Unity Game

1. Export your Unity game to WebGL
2. Replace `public/game.html` with your game's `index.html`
3. Ensure your game works in an iframe
4. Test the integration

## 🎮 How It Works

1. **Connect Wallet**: Users connect their Solana wallet
2. **Buy Tokens**: Purchase DINO tokens (integrate with your preferred DEX)
3. **Pay to Play**: Send 1 DINO token to your wallet
4. **Game Launch**: Game opens in an iframe after successful payment
5. **Blockchain Integration**: All transactions are recorded on Solana

## 🎨 Customization

### Colors

Update the CSS variables in `app/globals.css`:

```css
:root {
  --dino-green: #059669;
  --dino-green-light: #10b981;
  --dino-green-dark: #047857;
  --dino-yellow: #eab308;
  --dino-yellow-light: #fbbf24;
  --dino-yellow-dark: #ca8a04;
}
```

### Styling

- Modify Tailwind classes in components
- Update CSS animations and transitions
- Customize button styles and hover effects

## 🔌 DEX Integration

To enable actual token purchases, integrate with:

- **Raydium**: Popular Solana DEX
- **Orca**: User-friendly DEX
- **Jupiter**: Best price aggregator
- **Metaplex**: NFT marketplace

Example Raydium integration:

```typescript
// In your buy token function
const raydiumUrl = `https://raydium.io/swap/?inputCurrency=sol&outputCurrency=${DINO_TOKEN_MINT}`;
window.open(raydiumUrl, '_blank');
```

## 🚀 Deployment

### Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically on push

### Other Platforms

- **Netlify**: Drag and drop deployment
- **AWS Amplify**: Full-stack deployment
- **Heroku**: Traditional hosting

## 📱 Mobile Optimization

The website is fully responsive and includes:

- Touch-friendly buttons
- Mobile-optimized layouts
- Responsive iframe sizing
- Mobile wallet support

## 🔒 Security Considerations

- Always verify wallet connections
- Implement proper transaction validation
- Use HTTPS in production
- Validate iframe sources
- Implement rate limiting

## 🐛 Troubleshooting

### Common Issues

1. **Wallet not connecting**: Ensure wallet extension is installed
2. **Transaction failing**: Check SOL balance for fees
3. **Game not loading**: Verify iframe source and CORS settings
4. **Build errors**: Check Node.js version compatibility

### Debug Mode

Enable debug logging in development:

```typescript
// Add to components for debugging
console.log('Wallet connected:', publicKey?.toString());
console.log('Transaction status:', transactionStatus);
```

## 📚 Resources

- [Solana Documentation](https://docs.solana.com/)
- [Wallet Adapter](https://github.com/solana-labs/wallet-adapter)
- [Web3.js](https://solana-labs.github.io/solana-web3.js/)
- [Tailwind CSS](https://tailwindcss.com/)

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

## 📄 License

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

## 🆘 Support

For support and questions:

- Create an issue in the repository
- Contact the development team
- Check the documentation

---

**Happy Gaming! 🦖🎮**