🦖 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:

git clone <your-repo-url>
cd dino_landing_page

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

🔧 Configuration

Update Your Wallet Address

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

// 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:

: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:

// 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:

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

📚 Resources

• Solana Documentation
• Wallet Adapter
• Web3.js
• Tailwind CSS

🤝 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! 🦖🎮