README.md•2.26 kB
# Raccoonin' Game Landing Page 🦝
A pixel-perfect React implementation of a game landing page designed in Figma. This project showcases a modern, interactive landing page for a fun raccoon-themed game.
## 🎮 Features
- **Pixel-Perfect Design**: Implemented directly from Figma design specifications
- **Interactive Game Preview**: Interactive game section with animated elements
- **Responsive Layout**: Fully responsive design that works on all screen sizes
- **Modern Stack**: Built with React, TypeScript, and Styled Components
- **Component-Based Architecture**: Modular and maintainable code structure
## 🛠️ Technologies Used
- React 18
- TypeScript
- Styled Components
- Vite
- MCP (Model Context Protocol) for Figma integration
## 🚀 Getting Started
1. Clone the repository:
```bash
git clone https://github.com/yourusername/raccoon-game.git
cd raccoon-game
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
## 📁 Project Structure
```
src/
├── assets/ # Icons and static assets
├── components/ # React components
│ ├── Navbar
│ ├── Hero
│ ├── Game
│ ├── Features
│ └── SvgIcon
├── styles/ # Global styles
└── types/ # TypeScript type definitions
```
## 🧩 Components
- **Navbar**: Navigation bar with logo and menu
- **Hero**: Main landing section with call-to-action buttons
- **Game**: Interactive game preview section
- **Features**: Game features showcase
- **SvgIcon**: Reusable SVG icon component
## 🎨 Styling
The project uses styled-components for styling, with a focus on:
- Consistent design system
- Reusable components
- Pixel-perfect implementation
- Smooth animations and transitions
## 📝 License
MIT License - feel free to use this project for learning or personal use.
## 👥 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 🙏 Acknowledgments
- Design inspiration from the Figma community
- Icons and assets from various open-source projects
---
Made with ❤️ by [Your Name]